Blur icon

Use the Blur 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 { Blur24Regular, Blur24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Blur24Regular aria-label="Blur" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_blur_24_regular.svg" width="24" height="24" alt="Blur">

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="M3 12C3 7.02944 7.02944 3 12 3C13.8401 3 15.5512 3.55223 16.9767 4.5H12C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5V18H18.7083C17.0604 19.8412 14.6655 21 12 21C7.02944 21 3 16.9706 3 12ZM18.225 5.5H12V7H19.4845C19.1196 6.45499 18.6969 5.95205 18.225 5.5ZM12 8H20.0645C20.3018 8.47748 20.4979 8.97903 20.6482 9.5H12V8ZM20.8756 10.5H12V12H21C21 11.4889 20.9574 10.9878 20.8756 10.5ZM12 13H20.9451C20.8882 13.5143 20.788 14.0155 20.6482 14.5H12V13ZM20.2941 15.5H12V17H19.4845C19.7994 16.5295 20.0712 16.0276 20.2941 15.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/blur_24_regular.svg";

Details

Keywords

imagephotogaussian