Filter Sync icon
Used to filter list. The Filter Sync 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 Filter Sync 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 { FilterSync24Regular, FilterSync24Filled } from "@fluentui/react-icons";
export function Example() {
return <FilterSync24Regular aria-label="Filter Sync" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_filter_sync_24_regular.svg" width="24" height="24" alt="Filter Sync"> 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="M12 7.5C12 10.5376 14.4624 13 17.5 13C20.5376 13 23 10.5376 23 7.5C23 4.46243 20.5376 2 17.5 2C14.4624 2 12 4.46243 12 7.5ZM20.5 4C20.7761 4 21 4.22386 21 4.5V6.5C21 6.77614 20.7761 7 20.5 7H18.5C18.2239 7 18 6.77614 18 6.5C18 6.22386 18.2239 6 18.5 6H19.5003C19.0436 5.39204 18.3174 5 17.5 5C16.6666 5 15.9283 5.40734 15.4733 6.036C15.3113 6.25969 14.9987 6.30976 14.775 6.14785C14.5514 5.98593 14.5013 5.67333 14.6632 5.44964C15.2982 4.57236 16.3323 4 17.5 4C18.4798 4 19.3651 4.4027 20 5.05058V4.5C20 4.22386 20.2239 4 20.5 4ZM15 9.94938V10.5C15 10.7761 14.7761 11 14.5 11C14.2239 11 14 10.7761 14 10.5V8.5C14 8.22386 14.2239 8 14.5 8H16.5C16.7761 8 17 8.22386 17 8.5C17 8.77614 16.7761 9 16.5 9H15.4998C15.9564 9.60796 16.6827 10 17.5 10C18.2663 10 18.9518 9.65581 19.4112 9.11179C19.5893 8.9008 19.9048 8.87419 20.1158 9.05235C20.3268 9.2305 20.3534 9.54596 20.1752 9.75695C19.534 10.5164 18.5732 11 17.5 11C16.5203 11 15.6349 10.5973 15 9.94938ZM7.5 12.5H13.3464C12.8317 12.0719 12.3841 11.5659 12.0218 11H7.5C7.08579 11 6.75 11.3358 6.75 11.75C6.75 12.1642 7.08579 12.5 7.5 12.5ZM11 7.5C11 6.98373 11.0602 6.48152 11.1739 6H4.5C4.08579 6 3.75 6.33579 3.75 6.75C3.75 7.16421 4.08579 7.5 4.5 7.5H11ZM13.5 16C13.9142 16 14.25 16.3358 14.25 16.75C14.25 17.1642 13.9142 17.5 13.5 17.5H10.5C10.0858 17.5 9.75 17.1642 9.75 16.75C9.75 16.3358 10.0858 16 10.5 16H13.5Z" 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/filter_sync_24_regular.svg";Details
| Name | Filter Sync |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_filter_sync_24_regular.svg |
| Filled file | ic_fluent_filter_sync_24_filled.svg |
| React components | FilterSync24Regular, FilterSync24Filled |
| License | MIT (© Microsoft Corporation) |