Filter Add icon
Used to filter list. The Filter Add 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 Add 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 { FilterAdd24Regular, FilterAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <FilterAdd24Regular aria-label="Filter Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_filter_add_24_regular.svg" width="24" height="24" alt="Filter Add"> 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="M13.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.5ZM17.5 2C20.5376 2 23 4.46243 23 7.5C23 10.5376 20.5376 13 17.5 13C14.4624 13 12 10.5376 12 7.5C12 4.46243 14.4624 2 17.5 2ZM12.0215 11C12.3838 11.5659 12.8319 12.0719 13.3467 12.5H7.5C7.08579 12.5 6.75 12.1642 6.75 11.75C6.75 11.3358 7.08579 11 7.5 11H12.0215ZM17.5 3.99902C17.2239 3.99902 17.0001 4.22299 17 4.49902V7H14.4951C14.2195 7.00026 13.9961 7.22402 13.9961 7.5C13.9961 7.77598 14.2195 7.99974 14.4951 8H17.001V10.5039C17.0012 10.7798 17.225 11.0038 17.501 11.0039C17.777 11.0039 18.0008 10.7799 18.001 10.5039V8H20.4971C20.7727 7.99974 20.9961 7.77598 20.9961 7.5C20.9961 7.22402 20.7727 7.00026 20.4971 7H18V4.49902C17.9999 4.22299 17.7761 3.99902 17.5 3.99902ZM11.1738 6C11.0601 6.48151 11 6.98374 11 7.5H4.5C4.08579 7.5 3.75 7.16421 3.75 6.75C3.75 6.33579 4.08579 6 4.5 6H11.1738Z" 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_add_24_regular.svg";Details
| Name | Filter Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_filter_add_24_regular.svg |
| Filled file | ic_fluent_filter_add_24_filled.svg |
| React components | FilterAdd24Regular, FilterAdd24Filled |
| License | MIT (© Microsoft Corporation) |