Flip Horizontal icon

Use the Flip Horizontal 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 { FlipHorizontal24Regular, FlipHorizontal24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FlipHorizontal24Regular aria-label="Flip Horizontal" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_flip_horizontal_24_regular.svg" width="24" height="24" alt="Flip Horizontal">

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="M21.8806 19.6561C21.7425 19.8705 21.505 20.0001 21.25 20.0001H13.75C13.3358 20.0001 13 19.6643 13 19.2501L13 2.75007C13 2.39705 13.2462 2.09181 13.5912 2.01707C13.9363 1.94234 14.2867 2.11834 14.4328 2.43972L21.9328 18.9397C22.0383 19.1719 22.0186 19.4417 21.8806 19.6561ZM14.5 6.21253V18.5001H20.0852L14.5 6.21253ZM2.5 20C2.32883 20 2.16955 19.9125 2.07784 19.768C1.98612 19.6234 1.97471 19.442 2.04759 19.2872L10.0476 2.28715C10.1473 2.07532 10.3806 1.96102 10.6091 2.01209C10.8376 2.06317 11 2.26593 11 2.50005L11 19.5C11 19.7762 10.7761 20 10.5 20H2.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/flip_horizontal_24_regular.svg";

Details

Keywords

editcreatemirror