Glance Horizontal icon

Use the Glance 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 { GlanceHorizontal24Regular, GlanceHorizontal24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_glance_horizontal_24_regular.svg" width="24" height="24" alt="Glance 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="M13.001 4.75195C13.001 3.78545 12.2175 3.00195 11.251 3.00195H4.75098C3.78448 3.00195 3.00098 3.78545 3.00098 4.75195V9.25195C3.00098 10.2185 3.78448 11.002 4.75098 11.002H11.251C12.2175 11.002 13.001 10.2185 13.001 9.25195V4.75195ZM8.98856 14.7338C8.98856 13.7673 8.20506 12.9838 7.23856 12.9838H4.75098C3.78448 12.9838 3.00098 13.7673 3.00098 14.7338V19.2482C3.00098 20.2147 3.78448 20.9982 4.75098 20.9982H7.23856C8.20506 20.9982 8.98856 20.2147 8.98856 19.2482V14.7338ZM11.501 4.75195V9.25195C11.501 9.39002 11.389 9.50195 11.251 9.50195H4.75098C4.61291 9.50195 4.50098 9.39002 4.50098 9.25195V4.75195C4.50098 4.61388 4.61291 4.50195 4.75098 4.50195H11.251C11.389 4.50195 11.501 4.61388 11.501 4.75195ZM7.48856 14.7338V19.2482C7.48856 19.3862 7.37663 19.4982 7.23856 19.4982H4.75098C4.61291 19.4982 4.50098 19.3862 4.50098 19.2482V14.7338C4.50098 14.5957 4.61291 14.4838 4.75098 14.4838H7.23856C7.37663 14.4838 7.48856 14.5957 7.48856 14.7338ZM21.0027 14.7482C21.0027 13.7817 20.2192 12.9982 19.2527 12.9982H12.7527C11.8345 12.9982 11.0815 13.7053 11.0085 14.6046L11.0027 14.7482V19.2482C11.0027 20.2147 11.7862 20.9982 12.7527 20.9982H19.2527C20.2192 20.9982 21.0027 20.2147 21.0027 19.2482V14.7482ZM19.5027 14.7482V19.2482C19.5027 19.3862 19.3907 19.4982 19.2527 19.4982H12.7527C12.6146 19.4982 12.5027 19.3862 12.5027 19.2482V14.7482L12.5093 14.6908C12.5352 14.5804 12.6343 14.4982 12.7527 14.4982H19.2527C19.3907 14.4982 19.5027 14.6101 19.5027 14.7482ZM21.0027 4.75195C21.0027 3.78545 20.2192 3.00195 19.2527 3.00195H16.7527C15.7862 3.00195 15.0027 3.78545 15.0027 4.75195V9.25195C15.0027 10.2185 15.7862 11.002 16.7527 11.002H19.2527C20.2192 11.002 21.0027 10.2185 21.0027 9.25195V4.75195ZM19.5027 9.25195C19.5027 9.39002 19.3907 9.50195 19.2527 9.50195H16.7527C16.6146 9.50195 16.5027 9.39002 16.5027 9.25195V4.75195C16.5027 4.61388 16.6146 4.50195 16.7527 4.50195H19.2527C19.3907 4.50195 19.5027 4.61388 19.5027 4.75195V9.25195Z" 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/glance_horizontal_24_regular.svg";

Details

Keywords

cardtileview