Crop Sparkle icon
Used to represent AI auto cropping actions in UI. The Crop Sparkle icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Crop 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 { CropSparkle24Regular, CropSparkle24Filled } from "@fluentui/react-icons";
export function Example() {
return <CropSparkle24Regular aria-label="Crop Sparkle" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_crop_sparkle_24_regular.svg" width="24" height="24" alt="Crop 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="M8.75 18.5H12.3707C12.3402 18.4643 12.3112 18.4272 12.2839 18.3886C12.0992 18.1278 12 17.8162 12 17.4966C12 17.3266 12.028 17.159 12.0821 17H8.75L8.60647 16.9942C7.70711 16.9212 7 16.1682 7 15.25V2.75L6.99315 2.64823C6.94349 2.28215 6.6297 2 6.25 2C5.83579 2 5.5 2.33579 5.5 2.75L5.499 5.5H2.75L2.64823 5.50685C2.28215 5.55651 2 5.8703 2 6.25C2 6.66421 2.33579 7 2.75 7H5.499L5.5 15.25L5.50514 15.4344C5.60075 17.1435 7.01697 18.5 8.75 18.5ZM18.3641 12.2834C18.4116 12.3169 18.4569 12.353 18.5 12.3914V8.75L18.4949 8.56558C18.3992 6.85646 16.983 5.5 15.25 5.5H8V7H15.25L15.3935 7.0058C16.2929 7.07881 17 7.83183 17 8.75V12.074C17.1518 12.0253 17.3111 12 17.4724 12C17.7918 12 18.1033 12.099 18.3641 12.2834ZM23.214 12.5717L23.8263 12.7705L23.8386 12.7736C23.8858 12.7902 23.9267 12.8211 23.9556 12.8619C23.9845 12.9027 24 12.9515 24 13.0015C24 13.0515 23.9845 13.1003 23.9556 13.1411C23.9267 13.182 23.8858 13.2128 23.8386 13.2295L23.2262 13.4283C23.0401 13.4902 22.8709 13.5945 22.7322 13.7331C22.5935 13.8718 22.489 14.0408 22.4271 14.2268L22.2281 14.8387C22.2115 14.8859 22.1806 14.9267 22.1397 14.9556C22.0989 14.9845 22.05 15 22 15C21.95 15 21.9011 14.9845 21.8603 14.9556C21.8194 14.9267 21.7885 14.8859 21.7719 14.8387L21.5729 14.2268C21.5114 14.0402 21.4071 13.8706 21.2684 13.7314C21.1296 13.5922 20.9603 13.4874 20.7738 13.4253L20.1614 13.2264C20.1142 13.2098 20.0733 13.1789 20.0444 13.1381C20.0155 13.0973 20 13.0485 20 12.9985C20 12.9485 20.0155 12.8997 20.0444 12.8589C20.0733 12.818 20.1142 12.7872 20.1614 12.7705L20.7738 12.5717C20.9577 12.5082 21.1244 12.4031 21.2609 12.2646C21.3974 12.1261 21.5 11.9579 21.5606 11.7732L21.7597 11.1613C21.7763 11.1141 21.8072 11.0733 21.848 11.0444C21.8889 11.0155 21.9377 11 21.9878 11C22.0378 11 22.0866 11.0155 22.1275 11.0444C22.1683 11.0733 22.1992 11.1141 22.2159 11.1613L22.4149 11.7732C22.4768 11.9592 22.5812 12.1282 22.7199 12.2669C22.8587 12.4055 23.0278 12.5098 23.214 12.5717ZM15.8539 19.1457C15.9377 19.2298 16.016 19.3189 16.0883 19.4123C16.2851 19.6666 16.4378 19.9533 16.539 20.2604L16.9868 21.6371C17.0242 21.7432 17.0937 21.8351 17.1856 21.9001C17.2776 21.9651 17.3874 22 17.5 22C17.6126 22 17.7224 21.9651 17.8144 21.9001C17.8964 21.8421 17.9605 21.7627 18 21.6709C18.0028 21.6645 18.0054 21.658 18.0079 21.6515C18.0098 21.6467 18.0115 21.6419 18.0132 21.6371L18.461 20.2604C18.6003 19.8418 18.8353 19.4615 19.1474 19.1496C19.4595 18.8377 19.8402 18.6029 20.259 18.4637L21.6368 18.0163C21.743 17.9788 21.835 17.9094 21.9 17.8176C21.9651 17.7257 22 17.616 22 17.5034C22 17.3909 21.9651 17.2812 21.9 17.1893C21.835 17.0975 21.743 17.028 21.6368 16.9906L21.6093 16.9837L20.2315 16.5363C19.8126 16.3971 19.432 16.1623 19.1198 15.8504C18.8077 15.5385 18.5727 15.1582 18.4335 14.7396L17.9857 13.3629C17.9482 13.2568 17.8787 13.1649 17.7868 13.0999C17.6949 13.0349 17.5851 13 17.4724 13C17.3598 13 17.25 13.0349 17.1581 13.0999C17.0662 13.1649 16.9967 13.2568 16.9592 13.3629L16.5114 14.7396L16.5 14.7737C16.3623 15.1759 16.1357 15.5422 15.837 15.8454C15.5299 16.1571 15.1547 16.3935 14.741 16.5363L13.3632 16.9837C13.257 17.0212 13.165 17.0906 13.1 17.1824C13.0349 17.2743 13 17.384 13 17.4966C13 17.6091 13.0349 17.7188 13.1 17.8107C13.165 17.9025 13.257 17.972 13.3632 18.0094L14.741 18.4568C15.1606 18.5967 15.5417 18.8326 15.8539 19.1457Z" 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/crop_sparkle_24_regular.svg";Details
| Name | Crop Sparkle |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_crop_sparkle_24_regular.svg |
| Filled file | ic_fluent_crop_sparkle_24_filled.svg |
| React components | CropSparkle24Regular, CropSparkle24Filled |
| License | MIT (© Microsoft Corporation) |