Hover the icon or press Play. Suggested motion: flicker. Pick another to preview it and update the animated code:
Flame icon
A free flame icon from VS Code 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
- CC BY 4.0 license
- Project
- github.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/flame.jsonimport * as React from "react";
/**
* Flame from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/flame. Sized in em, colored by currentColor.
*/
export function VscFlameIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M8.1694 2.38161C8.44582 2.23863 8.72367 2.14217 8.96199 2.08199C8.98644 2.62292 9.15365 3.15614 9.38208 3.66553C9.7057 4.38719 10.1817 5.12315 10.6465 5.83569C10.6644 5.86313 10.6823 5.89054 10.7002 5.91792C11.1553 6.61534 11.5997 7.2963 11.9379 7.97958C12.2887 8.68856 12.5034 9.35877 12.5034 10C12.5034 11.1529 12.1584 12.1473 11.5114 12.8484C10.8704 13.5429 9.88689 14 8.50338 14C7.10629 14 6.13556 13.5958 5.45709 12.9749C4.77045 12.3465 4.33513 11.4518 4.09927 10.3914C3.87708 9.39256 4.07301 8.49755 4.33374 7.84072C4.37616 7.73386 4.42008 7.63386 4.46386 7.54138L4.58938 7.79243C4.97001 8.55369 5.89571 8.86226 6.65697 8.48162C7.50314 8.05854 7.73725 7.02244 7.37909 6.24601C7.00688 5.43912 6.71741 4.43545 6.97653 3.65811C7.17125 3.07394 7.63415 2.65846 8.1694 2.38161ZM4.11056 6.18914L4.10959 6.19037L4.10785 6.19258L4.1029 6.19894L4.08731 6.21936C4.07451 6.23635 4.057 6.26009 4.03559 6.29026C3.99281 6.35055 3.93432 6.43679 3.86679 6.54649C3.732 6.76546 3.55959 7.08054 3.40429 7.47178C3.0944 8.25245 2.84483 9.35744 3.12312 10.6086C3.38774 11.7982 3.89791 12.9035 4.78195 13.7126C5.67415 14.5292 6.89927 15 8.50338 15C10.1211 15 11.3875 14.4571 12.2463 13.5266C13.0989 12.6027 13.5034 11.3471 13.5034 10C13.5034 9.14123 13.2179 8.31144 12.8341 7.53604C12.4688 6.7979 11.9948 6.07168 11.5492 5.38919C11.5274 5.35579 11.5057 5.32249 11.484 5.2893C11.0111 4.56435 10.5805 3.89406 10.2945 3.25635C10.0087 2.61894 9.89683 2.07627 9.99247 1.59806C10.0219 1.45117 9.98382 1.29885 9.88885 1.18301C9.79389 1.06716 9.65198 1 9.50218 1C9.08022 1 8.377 1.14838 7.70997 1.49339C7.03689 1.84154 6.33312 2.42606 6.02784 3.34189C5.63773 4.51222 6.08683 5.83198 6.47104 6.66488C6.64207 7.03564 6.49357 7.44529 6.20976 7.5872C5.94247 7.72084 5.61745 7.6125 5.48381 7.34521L4.9494 6.27639C4.87302 6.12365 4.72397 6.02044 4.55412 6.0027C4.38427 5.98497 4.21685 6.05547 4.11056 6.18914Z"
/>
</svg>
);
}import { VscFlame } from "react-icons/vsc";
export function Example() {
return <VscFlame className="size-5" />;
}<svg
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.1694 2.38161C8.44582 2.23863 8.72367 2.14217 8.96199 2.08199C8.98644 2.62292 9.15365 3.15614 9.38208 3.66553C9.7057 4.38719 10.1817 5.12315 10.6465 5.83569C10.6644 5.86313 10.6823 5.89054 10.7002 5.91792C11.1553 6.61534 11.5997 7.2963 11.9379 7.97958C12.2887 8.68856 12.5034 9.35877 12.5034 10C12.5034 11.1529 12.1584 12.1473 11.5114 12.8484C10.8704 13.5429 9.88689 14 8.50338 14C7.10629 14 6.13556 13.5958 5.45709 12.9749C4.77045 12.3465 4.33513 11.4518 4.09927 10.3914C3.87708 9.39256 4.07301 8.49755 4.33374 7.84072C4.37616 7.73386 4.42008 7.63386 4.46386 7.54138L4.58938 7.79243C4.97001 8.55369 5.89571 8.86226 6.65697 8.48162C7.50314 8.05854 7.73725 7.02244 7.37909 6.24601C7.00688 5.43912 6.71741 4.43545 6.97653 3.65811C7.17125 3.07394 7.63415 2.65846 8.1694 2.38161ZM4.11056 6.18914L4.10959 6.19037L4.10785 6.19258L4.1029 6.19894L4.08731 6.21936C4.07451 6.23635 4.057 6.26009 4.03559 6.29026C3.99281 6.35055 3.93432 6.43679 3.86679 6.54649C3.732 6.76546 3.55959 7.08054 3.40429 7.47178C3.0944 8.25245 2.84483 9.35744 3.12312 10.6086C3.38774 11.7982 3.89791 12.9035 4.78195 13.7126C5.67415 14.5292 6.89927 15 8.50338 15C10.1211 15 11.3875 14.4571 12.2463 13.5266C13.0989 12.6027 13.5034 11.3471 13.5034 10C13.5034 9.14123 13.2179 8.31144 12.8341 7.53604C12.4688 6.7979 11.9948 6.07168 11.5492 5.38919C11.5274 5.35579 11.5057 5.32249 11.484 5.2893C11.0111 4.56435 10.5805 3.89406 10.2945 3.25635C10.0087 2.61894 9.89683 2.07627 9.99247 1.59806C10.0219 1.45117 9.98382 1.29885 9.88885 1.18301C9.79389 1.06716 9.65198 1 9.50218 1C9.08022 1 8.377 1.14838 7.70997 1.49339C7.03689 1.84154 6.33312 2.42606 6.02784 3.34189C5.63773 4.51222 6.08683 5.83198 6.47104 6.66488C6.64207 7.03564 6.49357 7.44529 6.20976 7.5872C5.94247 7.72084 5.61745 7.6125 5.48381 7.34521L4.9494 6.27639C4.87302 6.12365 4.72397 6.02044 4.55412 6.0027C4.38427 5.98497 4.21685 6.05547 4.11056 6.18914Z"
/>
</svg>"Flame" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.