Photo Filter icon

Use the Photo Filter 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 { PhotoFilter24Regular, PhotoFilter24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_photo_filter_24_regular.svg" width="24" height="24" alt="Photo Filter">

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="M9.5 2C12.8843 2 15.7451 4.24163 16.6786 7.32113C19.7584 8.25487 22 11.1157 22 14.5C22 18.6421 18.6421 22 14.5 22C11.1157 22 8.25487 19.7584 7.3214 16.6789C4.24163 15.7451 2 12.8843 2 9.5C2 5.35786 5.35786 2 9.5 2ZM16.9858 9.03753L16.9961 9.25727L17 9.5C17 13.6421 13.6421 17 9.5 17C9.34498 17 9.19105 16.9953 9.03836 16.986C9.98248 19.0589 12.0729 20.5 14.5 20.5C17.8137 20.5 20.5 17.8137 20.5 14.5C20.5 12.0729 19.0589 9.98248 16.9858 9.03753ZM9.5 3.5C6.18629 3.5 3.5 6.18629 3.5 9.5C3.5 11.9271 4.94106 14.0175 7.01423 14.9625L7.00385 14.7427L7 14.5C7 10.3579 10.3579 7 14.5 7C14.655 7 14.8089 7.0047 14.9616 7.01398C14.0175 4.94106 11.9271 3.5 9.5 3.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/photo_filter_24_regular.svg";

Details

Keywords

createeditphotoimagepicturelighting