Document Split Hint icon

Use the Document Split Hint 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 { DocumentSplitHint24Regular, DocumentSplitHint24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentSplitHint24Regular aria-label="Document Split Hint" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_split_hint_24_regular.svg" width="24" height="24" alt="Document Split Hint">

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="M20 11.25C20 11.6642 19.6642 12 19.25 12C18.8358 12 18.5 11.6642 18.5 11.25V10H14C12.896 10 12 9.104 12 8V3.5H6C5.724 3.5 5.5 3.725 5.5 4V11.25C5.5 11.6642 5.16421 12 4.75 12C4.33579 12 4 11.6642 4 11.25V4C4 2.896 4.896 2 6 2H12.172C12.6865 2 13.2194 2.22035 13.585 2.586L19.414 8.414C19.7409 8.7409 19.9432 9.16962 19.9897 9.62532C19.9965 9.66587 20 9.70752 20 9.75V11.25ZM13.5 4.621V8C13.5 8.275 13.724 8.5 14 8.5H17.378L13.5 4.621ZM4.75 13C5.16421 13 5.5 13.3358 5.5 13.75V16.245C5.5 16.6592 5.16421 16.995 4.75 16.995C4.33579 16.995 4 16.6592 4 16.245V13.75C4 13.3358 4.33579 13 4.75 13ZM20 13.75C20 13.3358 19.6642 13 19.25 13C18.8358 13 18.5 13.3358 18.5 13.75V16.245C18.5 16.6592 18.8358 16.995 19.25 16.995C19.6642 16.995 20 16.6592 20 16.245V13.75ZM9.5 21.25C9.5 20.8358 9.83579 20.5 10.25 20.5H13.75C14.1642 20.5 14.5 20.8358 14.5 21.25C14.5 21.6642 14.1642 22 13.75 22H10.25C9.83579 22 9.5 21.6642 9.5 21.25ZM5.5 19.25C5.5 18.8358 5.16421 18.5 4.75 18.5C4.33579 18.5 4 18.8358 4 19.25V20C4 21.1046 4.89543 22 6 22H7.25C7.66421 22 8 21.6642 8 21.25C8 20.8358 7.66421 20.5 7.25 20.5H6C5.72386 20.5 5.5 20.2761 5.5 20V19.25ZM19.25 18.5C18.8358 18.5 18.5 18.8358 18.5 19.25V20C18.5 20.2761 18.2761 20.5 18 20.5H16.75C16.3358 20.5 16 20.8358 16 21.25C16 21.6642 16.3358 22 16.75 22H18C19.1046 22 20 21.1046 20 20V19.25C20 18.8358 19.6642 18.5 19.25 18.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/document_split_hint_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal