Filter Dismiss icon
Used to filter list. The Filter Dismiss 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 Dismiss 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 { FilterDismiss24Regular, FilterDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <FilterDismiss24Regular aria-label="Filter Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_filter_dismiss_24_regular.svg" width="24" height="24" alt="Filter Dismiss"> 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="M23 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 2C20.5376 2 23 4.46243 23 7.5ZM15.8536 5.14645C15.6583 4.95118 15.3417 4.95118 15.1464 5.14645C14.9512 5.34171 14.9512 5.65829 15.1464 5.85355L16.7929 7.5L15.1464 9.14645C14.9512 9.34171 14.9512 9.65829 15.1464 9.85355C15.3417 10.0488 15.6583 10.0488 15.8536 9.85355L17.5 8.20711L19.1464 9.85355C19.3417 10.0488 19.6583 10.0488 19.8536 9.85355C20.0488 9.65829 20.0488 9.34171 19.8536 9.14645L18.2071 7.5L19.8536 5.85355C20.0488 5.65829 20.0488 5.34171 19.8536 5.14645C19.6583 4.95118 19.3417 4.95118 19.1464 5.14645L17.5 6.79289L15.8536 5.14645Z" fill="currentColor"/>
<path d="M13.3464 12.5C12.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.5H13.3464Z" fill="currentColor"/>
<path d="M11 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.5H11Z" fill="currentColor"/>
<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.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_dismiss_24_regular.svg";Details
| Name | Filter Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_filter_dismiss_24_regular.svg |
| Filled file | ic_fluent_filter_dismiss_24_filled.svg |
| React components | FilterDismiss24Regular, FilterDismiss24Filled |
| License | MIT (© Microsoft Corporation) |