Fluent Icons

Filter Sync icon

Used to filter list. The Filter Sync icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_filter_sync_24_regular.svg

Filter Sync icon in React

npm install @fluentui/react-icons

import { FilterSync24Regular } from "@fluentui/react-icons";

export function Example() {
  return <FilterSync24Regular aria-label="Filter Sync" />;
}

Filter Sync icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/filter_sync_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/filter_sync_24_regular.svg" width="24" height="24" alt="Filter Sync">

Filter Sync icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.FilterSync())" />

Filter Sync icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.filter_sync_24_regular)

Filter Sync icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xE610;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xE610;" FontSize="24" />

Filter Sync icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_filter_sync_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\e610";
  font-size: 24px;
}

Filter Sync icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_filter_sync_24_regular" />

// Kotlin
R.drawable.ic_fluent_filter_sync_24_regular

Filter Sync icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .filterSync24Regular)

Filter Sync icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameFilter Sync
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_filter_sync_24_regular.svg
Filled fileic_fluent_filter_sync_24_filled.svg
React (Regular)FilterSync16Regular, FilterSync20Regular, FilterSync24Regular
React (Filled)FilterSync16Filled, FilterSync20Filled, FilterSync24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

dropdownsortline

Related icons

FilterFilter AddFilter DismissAgents SyncArrow SyncArrow Sync CheckmarkArrow Sync CircleArrow Sync DismissArrow Sync OffCalendar SyncCheckbox Checked SyncCloud Sync