Text Effects Sparkle icon

Use the Text Effects 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 { TextEffectsSparkle24Regular, TextEffectsSparkle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextEffectsSparkle24Regular aria-label="Text Effects Sparkle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_effects_sparkle_24_regular.svg" width="24" height="24" alt="Text Effects 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="M14.8539 6.14569C14.9377 6.2298 15.016 6.31886 15.0883 6.41228C15.2851 6.66664 15.4378 6.95331 15.539 7.26037L15.9868 8.63711C16.0242 8.74322 16.0937 8.8351 16.1856 8.9001C16.2776 8.9651 16.3874 9 16.5 9C16.6126 9 16.7224 8.9651 16.8144 8.9001C16.8964 8.84212 16.9605 8.76273 17 8.67093C17.0048 8.65983 17.0092 8.64855 17.0132 8.63711L17.461 7.26037C17.6003 6.84181 17.8353 6.46147 18.1474 6.14959C18.4595 5.8377 18.8402 5.60285 19.259 5.46372L20.6368 5.01628C20.743 4.97884 20.835 4.90942 20.9 4.81756C20.9651 4.72571 21 4.61596 21 4.50344C21 4.39092 20.9651 4.28117 20.9 4.18932C20.835 4.09747 20.743 4.02804 20.6368 3.99061L20.6093 3.98372L19.2315 3.53628C18.8126 3.39715 18.432 3.1623 18.1198 2.85041C17.8077 2.53853 17.5727 2.15819 17.4335 1.73963L16.9857 0.362894C16.9482 0.256782 16.8787 0.164895 16.7868 0.0998993C16.6949 0.0349035 16.5851 0 16.4724 0C16.3598 0 16.25 0.0349035 16.1581 0.0998993C16.0662 0.164895 15.9967 0.256782 15.9592 0.362894L15.5114 1.73963L15.5 1.77372C15.3623 2.17595 15.1357 2.54224 14.837 2.84537C14.5299 3.15705 14.1547 3.39352 13.741 3.53628L12.3632 3.98372C12.257 4.02116 12.165 4.09058 12.1 4.18244C12.0349 4.27429 12 4.38404 12 4.49656C12 4.60908 12.0349 4.71883 12.1 4.81068C12.165 4.90253 12.257 4.97196 12.3632 5.00939L13.741 5.45683C14.1606 5.59666 14.5417 5.83255 14.8539 6.14569ZM22.0175 9.9646L22.7829 10.2132L22.7982 10.217C22.8572 10.2378 22.9083 10.2764 22.9445 10.3274C22.9806 10.3784 23 10.4394 23 10.5019C23 10.5644 22.9806 10.6254 22.9445 10.6764C22.9083 10.7275 22.8572 10.766 22.7982 10.7868L22.0328 11.0354C21.8001 11.1127 21.5886 11.2432 21.4152 11.4164C21.2418 11.5897 21.1113 11.801 21.0339 12.0335L20.7851 12.7984C20.7643 12.8573 20.7257 12.9084 20.6746 12.9445C20.6236 12.9806 20.5626 13 20.5 13C20.4374 13 20.3764 12.9806 20.3254 12.9445C20.2743 12.9084 20.2357 12.8573 20.2149 12.7984L19.9661 12.0335C19.8893 11.8003 19.7589 11.5882 19.5855 11.4143C19.412 11.2403 19.2003 11.1093 18.9672 11.0316L18.2018 10.783C18.1428 10.7622 18.0917 10.7236 18.0555 10.6726C18.0194 10.6216 18 10.5606 18 10.4981C18 10.4356 18.0194 10.3746 18.0555 10.3236C18.0917 10.2725 18.1428 10.234 18.2018 10.2132L18.9672 9.9646C19.1971 9.88529 19.4055 9.75392 19.5761 9.58076C19.7467 9.40761 19.875 9.19736 19.9508 8.96646L20.1996 8.20161C20.2204 8.14266 20.259 8.09161 20.31 8.0555C20.3611 8.01939 20.4221 8 20.4847 8C20.5473 8 20.6083 8.01939 20.6593 8.0555C20.7104 8.09161 20.749 8.14266 20.7698 8.20161L21.0186 8.96646C21.0959 9.199 21.2265 9.41029 21.3999 9.58356C21.5733 9.75683 21.7848 9.8873 22.0175 9.9646ZM12.0006 2.5C12.3409 2.5 12.6701 2.56903 12.9719 2.69633L12.05 2.99903C11.4247 3.22211 11.0018 3.80273 11 4.46903C11.0003 4.5589 11.0088 4.64892 11.0249 4.73795L6.80446 14.5858C6.79823 14.5995 6.7923 14.6133 6.78667 14.6273L5.08149 18.6061C4.86394 19.1138 5.0991 19.7017 5.60673 19.9192C6.11436 20.1368 6.70224 19.9016 6.91979 19.394L8.3743 16.0001H15.6269L17.0815 19.394C17.2991 19.9016 17.8869 20.1368 18.3946 19.9192C18.9022 19.7016 19.1373 19.1138 18.9198 18.6061L17.2146 14.6273C17.2089 14.6133 17.203 14.5995 17.1968 14.5858L14.9594 9.36542C15.2145 9.59843 15.4904 9.78178 15.7873 9.8914C15.9927 9.99219 16.2218 10.0483 16.46 10.049C16.5963 10.0507 16.7317 10.0331 16.8622 9.99723L16.9861 10.2864C16.9684 10.3724 16.9596 10.4604 16.96 10.549C16.9564 10.9915 17.2022 11.413 17.5709 11.6508L18.5624 13.9644C18.578 13.9986 18.5928 14.0332 18.6069 14.0682L20.2985 18.0153C20.8424 19.2843 20.2545 20.754 18.9854 21.2979C17.7164 21.8418 16.2467 21.2539 15.7028 19.9849L14.6379 17.5001H9.3634L8.29851 19.9848C7.75463 21.2539 6.28493 21.8418 5.01586 21.2979C3.74678 20.754 3.15889 19.2844 3.70277 18.0153L5.39433 14.0682C5.40839 14.0332 5.42322 13.9987 5.4388 13.9645L9.7027 4.01522C10.0966 3.096 11.0005 2.5 12.0006 2.5ZM14.7698 14.0001H9.23143L12.0006 7.5386L14.7698 14.0001Z" 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/text_effects_sparkle_24_regular.svg";

Details

Keywords

typetexttypographyeditcreateletter