Emoji Sparkle icon

Use the Emoji 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 { EmojiSparkle24Regular, EmojiSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_emoji_sparkle_24_regular.svg" width="24" height="24" alt="Emoji 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="M16.0883 6.41228C16.016 6.31886 15.9377 6.2298 15.8539 6.14569C15.5417 5.83255 15.1606 5.59666 14.741 5.45683L13.3632 5.00939C13.257 4.97196 13.165 4.90253 13.1 4.81068C13.0349 4.71883 13 4.60908 13 4.49656C13 4.38404 13.0349 4.27429 13.1 4.18244C13.165 4.09058 13.257 4.02116 13.3632 3.98372L14.0739 3.75291L14.0702 3.75197L14.7406 3.534C14.9846 3.45077 15.2153 3.33478 15.4265 3.18986C15.5734 3.08855 15.7109 2.9733 15.837 2.84537C16.1357 2.54224 16.3623 2.17595 16.5 1.77372L16.5114 1.73963L16.9592 0.362894C16.9967 0.256782 17.0662 0.164895 17.1581 0.0998993C17.25 0.0349035 17.3598 0 17.4724 0C17.5851 0 17.6949 0.0349035 17.7868 0.0998993C17.8787 0.164895 17.9482 0.256782 17.9857 0.362894L18.4335 1.73963C18.5727 2.15819 18.8077 2.53853 19.1198 2.85041C19.432 3.1623 19.8126 3.39715 20.2315 3.53628L21.6093 3.98372L21.6368 3.99061C21.743 4.02804 21.835 4.09747 21.9 4.18932C21.9651 4.28117 22 4.39092 22 4.50344C22 4.61596 21.9651 4.72571 21.9 4.81756C21.835 4.90942 21.743 4.97884 21.6368 5.01628L20.259 5.46372C20.0844 5.52174 19.9163 5.5964 19.7572 5.68635C19.7585 5.68792 19.7597 5.6895 19.761 5.69107C19.537 5.81727 19.3304 5.97377 19.1474 6.15678C18.9687 6.33546 18.8153 6.53658 18.6907 6.75448L18.6882 6.75122C18.5962 6.91254 18.52 7.08302 18.461 7.26037L18.0132 8.63711C18.0092 8.64855 18.0048 8.65983 18 8.67093C17.9605 8.76273 17.8964 8.84212 17.8144 8.9001C17.7224 8.9651 17.6126 9 17.5 9C17.3874 9 17.2776 8.9651 17.1856 8.9001C17.0937 8.8351 17.0242 8.74322 16.9868 8.63711L16.539 7.26037C16.4378 6.95331 16.2851 6.66664 16.0883 6.41228ZM23.7829 10.2132L23.0175 9.9646C22.7848 9.8873 22.5733 9.75683 22.3999 9.58356C22.2265 9.41029 22.0959 9.199 22.0186 8.96646L21.7698 8.20161C21.749 8.14266 21.7104 8.09161 21.6593 8.0555C21.6083 8.01939 21.5473 8 21.4847 8C21.4221 8 21.3611 8.01939 21.31 8.0555C21.259 8.09161 21.2204 8.14266 21.1996 8.20161L20.9508 8.96646C20.875 9.19736 20.7467 9.40761 20.5761 9.58076C20.4732 9.68522 20.3565 9.77446 20.2297 9.84625L20.2275 9.84534L20.226 9.84615L20.2265 9.84802C20.144 9.89446 20.0573 9.93353 19.9672 9.9646L19.2018 10.2132C19.1428 10.234 19.0917 10.2725 19.0555 10.3236C19.0194 10.3746 19 10.4356 19 10.4981C19 10.5606 19.0194 10.6216 19.0555 10.6726C19.0917 10.7236 19.1428 10.7622 19.2018 10.783L19.9672 11.0316C20.2003 11.1093 20.412 11.2403 20.5855 11.4143C20.6644 11.4934 20.7344 11.5805 20.7945 11.6738C20.8658 11.7848 20.9231 11.9048 20.9646 12.031L21.2136 12.796C21.2205 12.8158 21.2295 12.8347 21.2402 12.8524C21.2617 12.8885 21.2907 12.92 21.3254 12.9445C21.3764 12.9806 21.4374 13 21.5 13C21.5626 13 21.6236 12.9806 21.6746 12.9445C21.7257 12.9084 21.7643 12.8573 21.7851 12.7984L22.0339 12.0335C22.1113 11.801 22.2418 11.5897 22.4152 11.4164C22.5886 11.2432 22.8001 11.1127 23.0328 11.0354L23.7982 10.7868C23.8572 10.766 23.9083 10.7275 23.9445 10.6764C23.9806 10.6254 24 10.5644 24 10.5019C24 10.4394 23.9806 10.3784 23.9445 10.3274C23.9083 10.2764 23.8572 10.2378 23.7982 10.217L23.7829 10.2132ZM20.7466 13.762C20.6024 13.6595 20.4813 13.5295 20.3896 13.3805C19.7299 17.419 16.2247 20.5011 11.9996 20.5011C7.30432 20.5011 3.49805 16.6949 3.49805 11.9996C3.49805 7.30432 7.30432 3.49805 11.9996 3.49805C12.1205 3.49805 12.2408 3.50057 12.3604 3.50557C12.5431 3.2879 12.7827 3.12401 13.0536 3.033L14.4146 2.591C14.5543 2.5428 14.6873 2.47807 14.8107 2.39851C13.9189 2.13785 12.9756 1.99805 11.9996 1.99805C6.47589 1.99805 1.99805 6.47589 1.99805 11.9996C1.99805 17.5233 6.47589 22.0011 11.9996 22.0011C16.8505 22.0011 20.8948 18.5477 21.8081 13.9652C21.6418 14.0058 21.4688 14.0133 21.2991 13.9868C21.1 13.9557 20.9109 13.8787 20.7466 13.762ZM11.9996 16.5012C10.6015 16.5012 9.31047 15.8606 8.46134 14.7829C8.20499 14.4576 7.73342 14.4016 7.40806 14.658C7.08271 14.9143 7.02676 15.3859 7.28311 15.7112C8.41371 17.1462 10.1369 18.0012 11.9996 18.0012C13.8597 18.0012 15.5809 17.1485 16.7117 15.7168C16.9684 15.3917 16.913 14.9201 16.588 14.6634C16.2629 14.4066 15.7913 14.462 15.5345 14.7871C14.6853 15.8624 13.3958 16.5012 11.9996 16.5012ZM10.2493 9.99953C10.2493 9.30956 9.69001 8.75024 9.00005 8.75024C8.31008 8.75024 7.75076 9.30956 7.75076 9.99953C7.75076 10.6895 8.31008 11.2488 9.00005 11.2488C9.69001 11.2488 10.2493 10.6895 10.2493 9.99953ZM16.2493 9.99953C16.2493 9.30956 15.69 8.75024 15 8.75024C14.3101 8.75024 13.7508 9.30956 13.7508 9.99953C13.7508 10.6895 14.3101 11.2488 15 11.2488C15.69 11.2488 16.2493 10.6895 16.2493 9.99953Z" 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/emoji_sparkle_24_regular.svg";

Details

Keywords

faceemotefeelingplus