Orientation icon

Use the Orientation 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 { Orientation24Regular, Orientation24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.75 4C6.33579 4 6 4.33579 6 4.75C6 5.16421 6.33579 5.5 6.75 5.5H8.25C8.66421 5.5 9 5.16421 9 4.75C9 4.33579 8.66421 4 8.25 4H6.75ZM3.5 8.75C3.5 8.33579 3.16421 8 2.75 8C2.33579 8 2 8.33579 2 8.75V10.25C2 10.6642 2.33579 11 2.75 11C3.16421 11 3.5 10.6642 3.5 10.25V8.75ZM3.9 11C2.85066 11 2 11.8507 2 12.9V18.1C2 19.1493 2.85066 20 3.9 20H14.1C15.1493 20 16 19.1493 16 18.1V12.9C16 11.8507 15.1493 11 14.1 11H12.25C12.6642 11 13 10.6642 13 10.25V8.75C13 8.33579 12.6642 8 12.25 8C11.8358 8 11.5 8.33579 11.5 8.75V10.25C11.5 10.6642 11.8358 11 12.25 11H3.9ZM3.5 12.9C3.5 12.6791 3.67909 12.5 3.9 12.5H14.1C14.3209 12.5 14.5 12.6791 14.5 12.9V18.1C14.5 18.3209 14.3209 18.5 14.1 18.5H3.9C3.67909 18.5 3.5 18.3209 3.5 18.1V12.9ZM3.75 5.5C3.61193 5.5 3.5 5.61193 3.5 5.75V6.25C3.5 6.66421 3.16421 7 2.75 7C2.33579 7 2 6.66421 2 6.25V5.75C2 4.7835 2.7835 4 3.75 4H4.25C4.66421 4 5 4.33579 5 4.75C5 5.16421 4.66421 5.5 4.25 5.5H3.75ZM11.5 5.75C11.5 5.61193 11.3881 5.5 11.25 5.5H10.75C10.3358 5.5 10 5.16421 10 4.75C10 4.33579 10.3358 4 10.75 4H11.25C12.2165 4 13 4.7835 13 5.75V6.25C13 6.66421 12.6642 7 12.25 7C11.8358 7 11.5 6.66421 11.5 6.25V5.75ZM17 16.0756C17 16.5601 17.419 16.9453 17.8879 16.8234C20.2535 16.2083 22 14.0581 22 11.5C22 8.80915 20.0676 6.56964 17.5149 6.09344L17.8194 5.73811C18.089 5.42361 18.0526 4.95014 17.7381 4.68057C17.4236 4.411 16.9501 4.44743 16.6806 4.76192L15.1806 6.51192C14.9398 6.79279 14.9398 7.20724 15.1806 7.48811L16.6806 9.23811C16.9501 9.5526 17.4236 9.58902 17.7381 9.31946C18.0526 9.04989 18.089 8.57641 17.8194 8.26192L17.2221 7.56501C19.0866 7.90493 20.5 9.5374 20.5 11.5C20.5 13.3298 19.2714 14.8726 17.5941 15.3485C17.2607 15.4431 17 15.7291 17 16.0756Z" 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/orientation_24_regular.svg";

Details

Keywords

rotatehorizontalvertical