Arrow Trending Sparkle icon

Use the Arrow Trending 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 { ArrowTrendingSparkle24Regular, ArrowTrendingSparkle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowTrendingSparkle24Regular aria-label="Arrow Trending Sparkle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_trending_sparkle_24_regular.svg" width="24" height="24" alt="Arrow Trending 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="M4.85387 8.14569C4.93772 8.2298 5.01598 8.31886 5.08828 8.41228C5.28514 8.66664 5.43782 8.95331 5.53899 9.26037L5.98677 10.6371C6.02423 10.7432 6.09372 10.8351 6.18564 10.9001C6.27756 10.9651 6.38739 11 6.5 11C6.61261 11 6.72244 10.9651 6.81436 10.9001C6.89637 10.8421 6.96052 10.7627 7 10.6709C7.00477 10.6598 7.00919 10.6486 7.01323 10.6371L7.46101 9.26037C7.60025 8.84181 7.83528 8.46147 8.1474 8.14959C8.45953 7.8377 8.84016 7.60285 9.25903 7.46372L10.6368 7.01628C10.743 6.97884 10.835 6.90942 10.9 6.81756C10.9651 6.72571 11 6.61596 11 6.50344C11 6.39092 10.9651 6.28117 10.9 6.18932C10.835 6.09747 10.743 6.02804 10.6368 5.99061L10.6093 5.98372L9.23148 5.53628C8.8126 5.39715 8.43198 5.1623 8.11985 4.85041C7.80772 4.53853 7.5727 4.15819 7.43346 3.73963L6.98567 2.36289C6.94821 2.25678 6.87873 2.1649 6.78681 2.0999C6.69489 2.0349 6.58505 2 6.47244 2C6.35984 2 6.25 2.0349 6.15808 2.0999C6.06616 2.1649 5.99668 2.25678 5.95922 2.36289L5.51143 3.73963L5.5 3.77372C5.36226 4.17595 5.13572 4.54224 4.837 4.84537C4.52987 5.15705 4.15474 5.39352 3.74097 5.53628L2.36317 5.98372C2.25698 6.02116 2.16502 6.09058 2.09998 6.18244C2.03493 6.27429 2 6.38404 2 6.49656C2 6.60908 2.03493 6.71883 2.09998 6.81068C2.16502 6.90253 2.25698 6.97196 2.36317 7.00939L3.74097 7.45683C4.16058 7.59666 4.54169 7.83255 4.85387 8.14569ZM20.25 7.00001C20.6642 7.00001 21 7.3358 21 7.75001L21 12.75C21 13.1642 20.6642 13.5 20.25 13.5C19.8358 13.5 19.5 13.1642 19.5 12.75L19.5 9.56066L13.5303 15.5303C13.2374 15.8232 12.7626 15.8232 12.4697 15.5303L10.25 13.3107L4.28033 19.2803C3.98744 19.5732 3.51256 19.5732 3.21967 19.2803C2.92678 18.9874 2.92678 18.5126 3.21967 18.2197L9.71967 11.7197C10.0126 11.4268 10.4874 11.4268 10.7803 11.7197L13 13.9393L18.4394 8.50001L15.25 8.5C14.8358 8.5 14.5 8.16421 14.5 7.75C14.5 7.33578 14.8358 7 15.25 7L20.25 7.00001ZM20.0175 17.9646L20.7829 18.2132L20.7982 18.217C20.8572 18.2378 20.9083 18.2764 20.9445 18.3274C20.9806 18.3784 21 18.4394 21 18.5019C21 18.5644 20.9806 18.6254 20.9445 18.6764C20.9083 18.7275 20.8572 18.766 20.7982 18.7868L20.0328 19.0354C19.8001 19.1127 19.5886 19.2432 19.4152 19.4164C19.2418 19.5897 19.1113 19.801 19.0339 20.0335L18.7851 20.7984C18.7643 20.8573 18.7257 20.9084 18.6746 20.9445C18.6236 20.9806 18.5626 21 18.5 21C18.4374 21 18.3764 20.9806 18.3254 20.9445C18.2743 20.9084 18.2357 20.8573 18.2149 20.7984L17.9661 20.0335C17.8893 19.8003 17.7589 19.5882 17.5855 19.4143C17.412 19.2403 17.2003 19.1093 16.9672 19.0316L16.2018 18.783C16.1428 18.7622 16.0917 18.7236 16.0555 18.6726C16.0194 18.6216 16 18.5606 16 18.4981C16 18.4356 16.0194 18.3746 16.0555 18.3236C16.0917 18.2725 16.1428 18.234 16.2018 18.2132L16.9672 17.9646C17.1971 17.8853 17.4055 17.7539 17.5761 17.5808C17.7467 17.4076 17.875 17.1974 17.9508 16.9665L18.1996 16.2016C18.2204 16.1427 18.259 16.0916 18.31 16.0555C18.3611 16.0194 18.4221 16 18.4847 16C18.5473 16 18.6083 16.0194 18.6593 16.0555C18.7104 16.0916 18.749 16.1427 18.7698 16.2016L19.0186 16.9665C19.0959 17.199 19.2265 17.4103 19.3999 17.5836C19.5733 17.7568 19.7848 17.8873 20.0175 17.9646Z" 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/arrow_trending_sparkle_24_regular.svg";

Details

Keywords

arrowdirectiongrowthascendingpositiveaisparkles