Document Width icon

Use the Document Width 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 { DocumentWidth24Regular, DocumentWidth24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentWidth24Regular aria-label="Document Width" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_width_24_regular.svg" width="24" height="24" alt="Document Width">

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.4991 15.724L18.5117 15.7383C18.9107 16.1372 19.459 16.3059 20 16.2226V19.75C20 20.9409 19.0748 21.9156 17.904 21.9948L17.75 22H6.25C5.05914 22 4.08436 21.0748 4.00519 19.904L4 19.75L3.99909 16.2216C4.48619 16.2969 4.97937 16.1679 5.36416 15.8503L5.49909 15.725L5.5 19.75C5.5 20.1297 5.78215 20.4435 6.14823 20.4932L6.25 20.5H17.75C18.1297 20.5 18.4435 20.2178 18.4932 19.8518L18.5 19.75L18.4991 15.724ZM4.78115 8.96803C5.04742 9.23429 5.07162 9.65096 4.85377 9.94457L4.78115 10.0287L3.56 11.2484H7.34367C7.7061 11.2483 8 11.5841 8 11.9983C8 12.378 7.75319 12.6918 7.43288 12.7415L7.34383 12.7484H3.56L4.78115 13.9697C5.04742 14.2359 5.07162 14.6526 4.85377 14.9462L4.78115 15.0303C4.51488 15.2966 4.09822 15.3208 3.80461 15.1029L3.72049 15.0303L1.35072 12.6631C1.14219 12.5375 1 12.2874 1 11.9993C1 11.7113 1.14201 11.4611 1.35039 11.3355L3.72049 8.96803C4.01338 8.67513 4.48826 8.67513 4.78115 8.96803ZM19.2188 8.96511C19.4851 8.69884 19.9018 8.67464 20.1954 8.89249L20.2795 8.96511L22.6496 11.3325C22.858 11.4582 23 11.7083 23 11.9964C23 12.2485 22.8911 12.4715 22.7242 12.6074L22.6493 12.6602L20.2795 15.0274L20.1954 15.1C19.9344 15.2937 19.5762 15.2961 19.3128 15.1072L19.2188 15.0274L19.1462 14.9433C18.9526 14.6823 18.9502 14.3241 19.1391 14.0607L19.2188 13.9668L20.44 12.7454H16.6562L16.5671 12.7386C16.2468 12.6889 16 12.375 16 11.9953C16 11.6157 16.247 11.3019 16.5673 11.2523L16.6563 11.2454H20.44L19.2188 10.0258L19.1462 9.94165C18.9284 9.64804 18.9526 9.23138 19.2188 8.96511ZM17.75 2C18.9409 2 19.9156 2.92516 19.9948 4.09595L20 4.25L19.9998 7.76711C19.5253 7.69883 19.0281 7.82556 18.6377 8.14728L18.4993 8.27429L18.5 4.25C18.5 3.8703 18.2178 3.55651 17.8518 3.50685L17.75 3.5H6.25C5.8703 3.5 5.55651 3.78215 5.50685 4.14823L5.5 4.25L5.49973 8.2725L5.48826 8.26092C5.08236 7.85502 4.52667 7.6902 3.99912 7.76645L4 4.25C4 3.05914 4.92516 2.08436 6.09595 2.00519L6.25 2H17.75Z" 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/document_width_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontaleditscalefit