Flow icon

Use the Flow 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 { Flow24Regular, Flow24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M18 5.5C16.6193 5.5 15.5 6.61929 15.5 8C15.5 9.38071 16.6193 10.5 18 10.5C19.3807 10.5 20.5 9.38071 20.5 8C20.5 6.61929 19.3807 5.5 18 5.5ZM14.0648 7.27888C14.4044 5.41393 16.0371 4 18 4C20.2091 4 22 5.79086 22 8C22 10.2091 20.2091 12 18 12C16.0651 12 14.451 10.6261 14.0802 8.80069C13.3164 8.98875 12.75 9.67823 12.75 10.5V13.5C12.75 15.1474 11.5243 16.5085 9.93517 16.7211C9.59563 18.5861 7.96294 20 6 20C3.79086 20 2 18.2091 2 16C2 13.7909 3.79086 12 6 12C7.93492 12 9.54896 13.3739 9.91985 15.1993C10.6836 15.0113 11.25 14.3218 11.25 13.5V10.5C11.25 8.85263 12.4757 7.49154 14.0648 7.27888ZM6 13.5C4.61929 13.5 3.5 14.6193 3.5 16C3.5 17.3807 4.61929 18.5 6 18.5C7.38071 18.5 8.5 17.3807 8.5 16C8.5 14.6193 7.38071 13.5 6 13.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/flow_24_regular.svg";

Details

Keywords

processautomation