F Stop icon

Use the F Stop 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 { FStop24Regular, FStop24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FStop24Regular aria-label="F Stop" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_f_stop_24_regular.svg" width="24" height="24" alt="F Stop">

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.1953 6.52761C13.5331 4.54881 15.5663 3.34643 17.4631 4.00373L18.0546 4.20869C18.4459 4.34432 18.8732 4.13699 19.0088 3.74561C19.1444 3.35423 18.9371 2.92701 18.5457 2.79138L17.9543 2.58642C15.1821 1.62575 12.2105 3.38307 11.7167 6.27516L10.9954 10.5H6.75013C6.33592 10.5 6.00013 10.8358 6.00013 11.25C6.00013 11.6642 6.33592 12 6.75013 12H10.7393L9.95674 16.5835C9.58064 18.7864 7.14497 19.9612 5.18686 18.8843L5.11158 18.8429C4.74864 18.6433 4.29259 18.7757 4.09298 19.1386C3.89336 19.5015 4.02576 19.9576 4.3887 20.1572L4.46399 20.1986C7.32584 21.7726 10.8857 20.0555 11.4353 16.836L12.261 12H16.2501C16.6643 12 17.0001 11.6642 17.0001 11.25C17.0001 10.8358 16.6643 10.5 16.2501 10.5H12.5171L13.1953 6.52761Z" 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/f_stop_24_regular.svg";

Details

Keywords

cameralenslight