Hover the icon or press Play. Suggested motion: nudge-right. Pick another to preview it and update the animated code:
Exclamation Triangle icon
A free exclamation triangle icon from Radix Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- MIT license
- Project
- icons.radix-ui.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/exclamation-triangle.jsonimport * as React from "react";
/**
* Exclamation Triangle from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/exclamation-triangle. Sized in em, colored by currentColor.
*/
export function RxExclamationTriangleIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M6.64204 0.483078C7.10887 -0.10392 8.04464 -0.0624346 8.44477 0.608078L14.8393 11.3366C15.2761 12.0697 14.7473 12.9995 13.894 12.9997H1.1059C0.252569 12.9994 -0.275364 12.0697 0.161567 11.3366L6.55512 0.608078L6.64204 0.483078ZM7.45161 1.08366L7.4145 1.12077L1.01997 11.8483C0.980388 11.9148 1.02858 11.9994 1.1059 11.9997H13.894C13.9714 11.9995 14.0196 11.9149 13.9799 11.8483L7.58637 1.12077C7.55727 1.07208 7.49625 1.05933 7.45161 1.08366ZM7.49946 9.72624C7.91367 9.72624 8.24946 10.062 8.24946 10.4762C8.24933 10.8903 7.91359 11.2262 7.49946 11.2262C7.08549 11.226 6.74958 10.8902 6.74946 10.4762C6.74946 10.0622 7.08542 9.72645 7.49946 9.72624ZM7.49946 3.78679C7.88158 3.78679 8.1879 4.10418 8.17329 4.48601L8.01899 8.48698C8.00826 8.76597 7.77866 8.98698 7.49946 8.98698C7.22048 8.98673 6.99163 8.76581 6.9809 8.48698L6.82661 4.48601C6.812 4.10434 7.11756 3.78706 7.49946 3.78679Z"
fill="currentColor"
/>
</svg>
);
}import { RxExclamationTriangle } from "react-icons/rx";
export function Example() {
return <RxExclamationTriangle className="size-5" />;
}<svg
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.64204 0.483078C7.10887 -0.10392 8.04464 -0.0624346 8.44477 0.608078L14.8393 11.3366C15.2761 12.0697 14.7473 12.9995 13.894 12.9997H1.1059C0.252569 12.9994 -0.275364 12.0697 0.161567 11.3366L6.55512 0.608078L6.64204 0.483078ZM7.45161 1.08366L7.4145 1.12077L1.01997 11.8483C0.980388 11.9148 1.02858 11.9994 1.1059 11.9997H13.894C13.9714 11.9995 14.0196 11.9149 13.9799 11.8483L7.58637 1.12077C7.55727 1.07208 7.49625 1.05933 7.45161 1.08366ZM7.49946 9.72624C7.91367 9.72624 8.24946 10.062 8.24946 10.4762C8.24933 10.8903 7.91359 11.2262 7.49946 11.2262C7.08549 11.226 6.74958 10.8902 6.74946 10.4762C6.74946 10.0622 7.08542 9.72645 7.49946 9.72624ZM7.49946 3.78679C7.88158 3.78679 8.1879 4.10418 8.17329 4.48601L8.01899 8.48698C8.00826 8.76597 7.77866 8.98698 7.49946 8.98698C7.22048 8.98673 6.99163 8.76581 6.9809 8.48698L6.82661 4.48601C6.812 4.10434 7.11756 3.78706 7.49946 3.78679Z"
fill="currentColor"
/>
</svg>"Exclamation Triangle" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.