Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: flicker. Pick another to preview it and update the animated code:

Simple Line Icons · SlFire

Fire icon

A free fire icon from Simple Line 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
thesabbir.github.io
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/fire.json
components/icons/simple-line-icons-fire.tsx
import * as React from "react";

/**
 * Fire from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/fire. Sized in em, colored by currentColor.
 */
export function SlFireIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M508.416 1023.28c-241.248 0-412.369-167.28-412.369-397.777 0-122.368 73.376-254.192 76.496-259.712 6.368-11.343 18.88-17.504 31.936-16.063a32.052 32.052 0 0 1 26.88 23.567c.192.752 19.968 74.752 46.064 115.84 17.536 27.649 35.312 47.185 55.312 60.753-13.536-58.656-23.904-146.912-7.024-237.472C372.047 63.84 567.695 4.368 576.08 1.968c10.784-3.088 22.225-.32 30.433 7.151 8.192 7.504 11.936 18.752 9.808 29.665-.32 1.744-32.624 175.776 35.936 324.064 6.223 13.471 14.912 29.12 24.256 44.784 2.656-21.504 6.784-44.368 13.12-66.56 25.152-87.969 90.192-118 92.944-119.217 10.848-4.944 23.504-3.312 32.88 4.032a32.061 32.061 0 0 1 11.68 31.007c-.336 2.16-9.409 62.033 41.536 146.944 46 76.672 59.28 126.368 59.28 221.681 0 230.48-176.432 397.761-419.536 397.761zm-312.721-555.6c-17.568 44.304-35.665 103.246-35.665 157.806 0 193.408 144.192 333.776 348.368 333.776 206 0 355.536-140.368 355.536-333.776 0-83.536-10.32-122.32-50.16-188.752-26.624-44.368-39.777-84.256-46.065-116-6.336 10.256-12.223 22.784-16.527 37.872-19.504 68.193-14.592 147.937-14.527 148.753.944 14.273-7.744 27.473-21.248 32.257s-28.529.064-36.817-11.663c-2.4-3.408-59.312-83.968-84.4-138.24-52.096-112.592-51.216-234.336-45.904-304.464-52.72 30.72-133.664 99.344-159.664 238.912-25.312 135.808 23.872 271.6 24.4 272.943 4.256 11.088 2 23.664-5.808 32.592-7.84 8.88-19.904 12.815-31.536 10.03-3.967-.975-94.032-24.399-152.336-116.286-10.416-16.464-19.76-36.384-27.647-55.76z"
      />
    </svg>
  );
}
With react-icons
import { SlFire } from "react-icons/sl";

export function Example() {
  return <SlFire className="size-5" />;
}
fire.svg
<svg
  viewBox="0 0 1024 1024"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M508.416 1023.28c-241.248 0-412.369-167.28-412.369-397.777 0-122.368 73.376-254.192 76.496-259.712 6.368-11.343 18.88-17.504 31.936-16.063a32.052 32.052 0 0 1 26.88 23.567c.192.752 19.968 74.752 46.064 115.84 17.536 27.649 35.312 47.185 55.312 60.753-13.536-58.656-23.904-146.912-7.024-237.472C372.047 63.84 567.695 4.368 576.08 1.968c10.784-3.088 22.225-.32 30.433 7.151 8.192 7.504 11.936 18.752 9.808 29.665-.32 1.744-32.624 175.776 35.936 324.064 6.223 13.471 14.912 29.12 24.256 44.784 2.656-21.504 6.784-44.368 13.12-66.56 25.152-87.969 90.192-118 92.944-119.217 10.848-4.944 23.504-3.312 32.88 4.032a32.061 32.061 0 0 1 11.68 31.007c-.336 2.16-9.409 62.033 41.536 146.944 46 76.672 59.28 126.368 59.28 221.681 0 230.48-176.432 397.761-419.536 397.761zm-312.721-555.6c-17.568 44.304-35.665 103.246-35.665 157.806 0 193.408 144.192 333.776 348.368 333.776 206 0 355.536-140.368 355.536-333.776 0-83.536-10.32-122.32-50.16-188.752-26.624-44.368-39.777-84.256-46.065-116-6.336 10.256-12.223 22.784-16.527 37.872-19.504 68.193-14.592 147.937-14.527 148.753.944 14.273-7.744 27.473-21.248 32.257s-28.529.064-36.817-11.663c-2.4-3.408-59.312-83.968-84.4-138.24-52.096-112.592-51.216-234.336-45.904-304.464-52.72 30.72-133.664 99.344-159.664 238.912-25.312 135.808 23.872 271.6 24.4 272.943 4.256 11.088 2 23.664-5.808 32.592-7.84 8.88-19.904 12.815-31.536 10.03-3.967-.975-94.032-24.399-152.336-116.286-10.416-16.464-19.76-36.384-27.647-55.76z"
  />
</svg>
Attribution
"Fire" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.

Related icons: flame, hot, trending, burn

Fire icon in other sets