Document Bullet List Multiple icon

Use the Document Bullet List Multiple 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 { DocumentBulletListMultiple24Regular, DocumentBulletListMultiple24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentBulletListMultiple24Regular aria-label="Document Bullet List Multiple" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_bullet_list_multiple_24_regular.svg" width="24" height="24" alt="Document Bullet List Multiple">

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="M7.75 11.5C7.33579 11.5 7 11.8358 7 12.25C7 12.6642 7.33579 13 7.75 13C8.16421 13 8.5 12.6642 8.5 12.25C8.5 11.8358 8.16421 11.5 7.75 11.5ZM7 15.25C7 14.8358 7.33579 14.5 7.75 14.5C8.16421 14.5 8.5 14.8358 8.5 15.25C8.5 15.6642 8.16421 16 7.75 16C7.33579 16 7 15.6642 7 15.25ZM10 12.25C10 11.8358 10.3358 11.5 10.75 11.5H13.8038C14.218 11.5 14.5538 11.8358 14.5538 12.25C14.5538 12.6642 14.218 13 13.8038 13H10.75C10.3358 13 10 12.6642 10 12.25ZM10.75 14.5C10.3358 14.5 10 14.8358 10 15.25C10 15.6642 10.3358 16 10.75 16H13.8038C14.218 16 14.5538 15.6642 14.5538 15.25C14.5538 14.8358 14.218 14.5 13.8038 14.5H10.75ZM6.25 2C5.00736 2 4 3.00736 4 4.25V17.25C4 18.4926 5.00736 19.5 6.25 19.5H15.25C16.4926 19.5 17.5 18.4926 17.5 17.25V8.86885C17.5 8.27211 17.2629 7.69981 16.841 7.27786L12.2221 2.65901C11.8002 2.23705 11.2279 2 10.6312 2H6.25ZM5.5 4.25C5.5 3.83579 5.83579 3.5 6.25 3.5H10.5039V6.74753C10.5039 7.99017 11.5113 8.99753 12.7539 8.99753H16V17.25C16 17.6642 15.6642 18 15.25 18H6.25C5.83579 18 5.5 17.6642 5.5 17.25V4.25ZM12.0039 6.74753V4.56209L14.9393 7.49753H12.7539C12.3397 7.49753 12.0039 7.16174 12.0039 6.74753ZM8.75088 22C7.77121 22 6.93778 21.3739 6.62891 20.5H15.2509C17.0458 20.5 18.5009 19.0449 18.5009 17.25V8.93689L19.3419 9.77788C19.7638 10.1998 20.0009 10.7721 20.0009 11.3689V17.25C20.0009 19.8734 17.8742 22 15.2509 22H8.75088Z" 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_bullet_list_multiple_24_regular.svg";

Details

Keywords

paperworkfileanalogtaskchecklistvertical