Document Bullet List Cube icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M10 12.25C10 11.8358 10.3358 11.5 10.75 11.5H16.25C16.6642 11.5 17 11.8358 17 12.25C17 12.6642 16.6642 13 16.25 13H10.75C10.3474 13 10 12.6558 10 12.25ZM12 16V15.25C12 14.9915 11.9601 14.739 11.8849 14.5H16.25C16.6642 14.5 17 14.8358 17 15.25C17 15.6642 16.6642 16 16.25 16H12ZM12 19V17.5H16.25C16.6642 17.5 17 17.8358 17 18.25C17 18.6642 16.6642 19 16.25 19H12ZM5.5 11.0505C5.28783 11.0938 5.07996 11.1649 4.88197 11.2639L4 11.7049V4C4 2.896 4.896 2 6 2H12.172C12.6865 2 13.2194 2.22035 13.585 2.586L19.414 8.414C19.789 8.789 20 9.298 20 9.828V20C20 21.104 19.104 22 18 22H10.5961L10.618 21.989C11.2347 21.6807 11.686 21.1379 11.8859 20.5H18C18.276 20.5 18.5 20.275 18.5 20V10H14C12.896 10 12 9.104 12 8V3.5H6C5.724 3.5 5.5 3.725 5.5 4V11.0505ZM17.378 8.5L13.5 4.621V8C13.5 8.275 13.724 8.5 14 8.5H17.378ZM10.1708 13.9084L6.67082 12.1584C6.24853 11.9472 5.75147 11.9472 5.32918 12.1584L1.82918 13.9084C1.321 14.1624 1 14.6818 1 15.25V19.753C1 20.3211 1.321 20.8405 1.82918 21.0946L5.32918 22.8446C5.75147 23.0557 6.24853 23.0557 6.67082 22.8446L10.1708 21.0946C10.679 20.8405 11 20.3211 11 19.753V15.25C11 14.6818 10.679 14.1624 10.1708 13.9084ZM2.55279 15.2764C2.67628 15.0294 2.97662 14.9293 3.22361 15.0528L6 16.441L8.77639 15.0528C9.02338 14.9293 9.32372 15.0294 9.44721 15.2764C9.57071 15.5234 9.4706 15.8237 9.22361 15.9472L6.5 17.3091V20.5C6.5 20.7762 6.27614 21 6 21C5.72386 21 5.5 20.7762 5.5 20.5V17.3091L2.77639 15.9472C2.5294 15.8237 2.42929 15.5234 2.55279 15.2764Z" 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_cube_24_regular.svg";

Details

Keywords

paperworkfileanalogtaskchecklistverticalshippingcargocratebox