Image Sparkle icon

Use the Image Sparkle icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { ImageSparkle24Regular, ImageSparkle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ImageSparkle24Regular aria-label="Image Sparkle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_image_sparkle_24_regular.svg" width="24" height="24" alt="Image Sparkle">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.91172 6.41228C7.98402 6.31886 8.06228 6.2298 8.14613 6.14569C8.45831 5.83255 8.83942 5.59666 9.25903 5.45683L10.6368 5.00939C10.743 4.97196 10.835 4.90253 10.9 4.81068C10.9651 4.71883 11 4.60908 11 4.49656C11 4.38404 10.9651 4.27429 10.9 4.18244C10.835 4.09058 10.743 4.02116 10.6368 3.98372L9.25903 3.53628C8.84526 3.39352 8.47013 3.15705 8.163 2.84537C7.86428 2.54224 7.63774 2.17595 7.5 1.77372L7.48857 1.73963L7.04078 0.362894C7.00332 0.256782 6.93384 0.164895 6.84192 0.0998993C6.75 0.0349035 6.64016 0 6.52756 0C6.41495 0 6.30511 0.0349035 6.21319 0.0998993C6.12127 0.164895 6.05179 0.256782 6.01433 0.362894L5.56654 1.73963C5.4273 2.15819 5.19228 2.53853 4.88015 2.85041C4.56802 3.1623 4.1874 3.39715 3.76852 3.53628L2.39073 3.98372L2.36317 3.99061C2.25698 4.02804 2.16502 4.09747 2.09998 4.18932C2.03493 4.28117 2 4.39092 2 4.50344C2 4.61596 2.03493 4.72571 2.09998 4.81756C2.16502 4.90942 2.25698 4.97884 2.36317 5.01628L3.74097 5.46372C4.15984 5.60285 4.54047 5.8377 4.8526 6.14959C5.16472 6.46147 5.39975 6.84181 5.53899 7.26037L5.98677 8.63711C5.99081 8.64855 5.99523 8.65983 6 8.67093C6.03948 8.76273 6.10363 8.84212 6.18564 8.9001C6.27756 8.9651 6.38739 9 6.5 9C6.61261 9 6.72244 8.9651 6.81436 8.9001C6.90628 8.8351 6.97577 8.74322 7.01323 8.63711L7.46101 7.26037C7.56218 6.95331 7.71486 6.66664 7.91172 6.41228ZM0.217072 10.2132L0.982513 9.9646C1.21522 9.8873 1.42668 9.75683 1.60008 9.58356C1.77349 9.41029 1.90406 9.199 1.98141 8.96646L2.23018 8.20161C2.25099 8.14266 2.2896 8.09161 2.34066 8.0555C2.39173 8.01939 2.45275 8 2.51531 8C2.57787 8 2.63889 8.01939 2.68996 8.0555C2.74102 8.09161 2.77962 8.14266 2.80044 8.20161L3.0492 8.96646C3.12502 9.19736 3.25325 9.40761 3.42389 9.58076C3.59452 9.75392 3.80292 9.88529 4.0328 9.9646L4.79824 10.2132C4.85723 10.234 4.90832 10.2725 4.94446 10.3236C4.98059 10.3746 5 10.4356 5 10.4981C5 10.5606 4.98059 10.6216 4.94446 10.6726C4.90832 10.7236 4.85723 10.7622 4.79824 10.783L4.0328 11.0316C3.79968 11.1093 3.58795 11.2403 3.41452 11.4143C3.24109 11.5882 3.11074 11.8003 3.0339 12.0335L2.78513 12.7984C2.76431 12.8573 2.72571 12.9084 2.67465 12.9445C2.62358 12.9806 2.56256 13 2.5 13C2.43744 13 2.37642 12.9806 2.32535 12.9445C2.27429 12.9084 2.23569 12.8573 2.21487 12.7984L1.9661 12.0335C1.88875 11.801 1.75818 11.5897 1.58478 11.4164C1.41137 11.2432 1.19991 11.1127 0.967205 11.0354L0.201763 10.7868C0.142767 10.766 0.0916786 10.7275 0.055542 10.6764C0.0194073 10.6254 0 10.5644 0 10.5019C0 10.4394 0.0194073 10.3784 0.055542 10.3274C0.0916786 10.2764 0.142767 10.2378 0.201763 10.217L0.217072 10.2132ZM12 4.46903C12 4.47936 11.9998 4.48969 11.9996 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V17.75C19.5 17.9588 19.4634 18.159 19.3964 18.3447L13.5742 12.6431L13.4458 12.5266C12.5675 11.7885 11.2589 11.8273 10.4258 12.643L4.60326 18.3437C4.53643 18.1583 4.5 17.9584 4.5 17.75V11.9911L4.38 12.029C4.29896 12.0623 4.22447 12.1097 4.16 12.169C4.09623 12.2339 4.04832 12.3126 4.02 12.399L3.78 13.159C3.68743 13.421 3.51632 13.6479 3.29 13.809C3.19985 13.8735 3.10232 13.9256 3 13.9647V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H10.9527C11.259 3.10986 11.5259 3.30783 11.72 3.56903C11.9016 3.83411 11.9992 4.14772 12 4.46903ZM12.5247 13.7148L18.3305 19.4014C18.1489 19.4653 17.9535 19.5 17.75 19.5H6.25C6.04613 19.5 5.8504 19.4651 5.66845 19.4011L11.4752 13.7148L11.5588 13.644C11.8501 13.4316 12.2596 13.4553 12.5247 13.7148ZM17.5042 8.75212C17.5042 7.50831 16.4959 6.5 15.2521 6.5C14.0083 6.5 13 7.50831 13 8.75212C13 9.99592 14.0083 11.0042 15.2521 11.0042C16.4959 11.0042 17.5042 9.99592 17.5042 8.75212ZM14.5 8.75212C14.5 8.33673 14.8367 8 15.2521 8C15.6675 8 16.0042 8.33673 16.0042 8.75212C16.0042 9.1675 15.6675 9.50423 15.2521 9.50423C14.8367 9.50423 14.5 9.1675 14.5 8.75212Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/image_sparkle_24_regular.svg";

Details

Keywords

photopicturesnapshotcontentai