Data Usage Sparkle icon

Use the Data Usage 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 { DataUsageSparkle24Regular, DataUsageSparkle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DataUsageSparkle24Regular aria-label="Data Usage Sparkle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_data_usage_sparkle_24_regular.svg" width="24" height="24" alt="Data Usage 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="M17 9.91683C16.84 9.97158 16.6711 10 16.5 10C16.1807 10 15.8691 9.90102 15.6083 9.71661C15.5709 9.69014 15.5347 9.66209 15.5 9.63258V16.27L15.5068 16.369C15.5565 16.725 15.8703 16.9994 16.25 16.9994C16.6642 16.9994 17 16.6728 17 16.27V9.91683ZM19.5 13.5321V18.2461C19.5 18.9364 18.9404 19.4961 18.25 19.4961H5.75C5.05964 19.4961 4.5 18.9364 4.5 18.2461V5.74609C4.5 5.05574 5.05964 4.49609 5.75 4.49609H11C11.0001 4.17664 11.0993 3.86515 11.2839 3.60451C11.4685 3.34377 11.7295 3.14678 12.0307 3.0406L12.0425 3.03646L12.1668 2.99609H5.75C4.23122 2.99609 3 4.22731 3 5.74609V18.2461C3 19.7649 4.23122 20.9961 5.75 20.9961H18.25C19.7688 20.9961 21 19.7649 21 18.2461V13.9002C20.8424 13.9657 20.6725 14 20.5 14C20.2307 14 19.968 13.9165 19.748 13.761C19.6552 13.6954 19.572 13.6183 19.5 13.5321ZM8.49315 9.64485C8.44349 9.28034 8.1297 8.9994 7.75 8.9994C7.33579 8.9994 7 9.33374 7 9.74618V16.2526L7.00685 16.354C7.05651 16.7185 7.3703 16.9994 7.75 16.9994C8.16421 16.9994 8.5 16.6651 8.5 16.2526V9.74618L8.49315 9.64485ZM12.75 12.6168C12.698 12.2628 12.3707 11.9925 12 11.9961C11.5956 12.0001 11.246 12.3285 11.25 12.7296L11.25 16.3755C11.302 16.7295 11.6293 16.9997 12 16.9962C12.4044 16.9921 12.754 16.6637 12.75 16.2626L12.75 12.6168ZM15.0883 6.41228C15.016 6.31886 14.9377 6.2298 14.8539 6.14569C14.5417 5.83255 14.1606 5.59666 13.741 5.45683L12.3632 5.00939C12.257 4.97196 12.165 4.90253 12.1 4.81068C12.0349 4.71883 12 4.60908 12 4.49656C12 4.38404 12.0349 4.27429 12.1 4.18244C12.165 4.09058 12.257 4.02116 12.3632 3.98372L13.741 3.53628C14.1547 3.39352 14.5299 3.15705 14.837 2.84537C15.1357 2.54224 15.3623 2.17595 15.5 1.77372L15.5114 1.73963L15.9592 0.362894C15.9967 0.256782 16.0662 0.164895 16.1581 0.0998993C16.25 0.0349035 16.3598 0 16.4724 0C16.5851 0 16.6949 0.0349035 16.7868 0.0998993C16.8787 0.164895 16.9482 0.256782 16.9857 0.362894L17.4335 1.73963C17.5727 2.15819 17.8077 2.53853 18.1198 2.85041C18.432 3.1623 18.8126 3.39715 19.2315 3.53628L20.6093 3.98372L20.6368 3.99061C20.743 4.02804 20.835 4.09747 20.9 4.18932C20.9651 4.28117 21 4.39092 21 4.50344C21 4.61596 20.9651 4.72571 20.9 4.81756C20.835 4.90942 20.743 4.97884 20.6368 5.01628L19.259 5.46372C18.8402 5.60285 18.4595 5.8377 18.1474 6.14959C17.8353 6.46147 17.6003 6.84181 17.461 7.26037L17.0132 8.63711C17.0092 8.64855 17.0048 8.65983 17 8.67093C16.9605 8.76273 16.8964 8.84212 16.8144 8.9001C16.7224 8.9651 16.6126 9 16.5 9C16.3874 9 16.2776 8.9651 16.1856 8.9001C16.0937 8.8351 16.0242 8.74322 15.9868 8.63711L15.539 7.26037C15.4378 6.95331 15.2851 6.66664 15.0883 6.41228ZM22.7829 10.2132L22.0175 9.9646C21.7848 9.8873 21.5733 9.75683 21.3999 9.58356C21.2265 9.41029 21.0959 9.199 21.0186 8.96646L20.7698 8.20161C20.749 8.14266 20.7104 8.09161 20.6593 8.0555C20.6083 8.01939 20.5473 8 20.4847 8C20.4221 8 20.3611 8.01939 20.31 8.0555C20.259 8.09161 20.2204 8.14266 20.1996 8.20161L19.9508 8.96646C19.875 9.19736 19.7467 9.40761 19.5761 9.58076C19.4055 9.75392 19.1971 9.88529 18.9672 9.9646L18.2018 10.2132C18.1428 10.234 18.0917 10.2725 18.0555 10.3236C18.0194 10.3746 18 10.4356 18 10.4981C18 10.5606 18.0194 10.6216 18.0555 10.6726C18.0917 10.7236 18.1428 10.7622 18.2018 10.783L18.9672 11.0316C19.2003 11.1093 19.412 11.2403 19.5855 11.4143C19.7589 11.5882 19.8893 11.8003 19.9661 12.0335L20.2149 12.7984C20.2357 12.8573 20.2743 12.9084 20.3254 12.9445C20.3764 12.9806 20.4374 13 20.5 13C20.5626 13 20.6236 12.9806 20.6746 12.9445C20.7257 12.9084 20.7643 12.8573 20.7851 12.7984L21.0339 12.0335C21.1113 11.801 21.2418 11.5897 21.4152 11.4164C21.5886 11.2432 21.8001 11.1127 22.0328 11.0354L22.7982 10.7868C22.8572 10.766 22.9083 10.7275 22.9445 10.6764C22.9806 10.6254 23 10.5644 23 10.5019C23 10.4394 22.9806 10.3784 22.9445 10.3274C22.9083 10.2764 22.8572 10.2378 22.7982 10.217L22.7829 10.2132Z" 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/data_usage_sparkle_24_regular.svg";

Details