Document Bullet List Clock icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M19.414 8.414L13.585 2.586C13.2194 2.22035 12.6865 2 12.172 2H6C4.896 2 4 2.896 4 4V20C4 21.104 4.896 22 6 22H12.8096C12.3832 21.5557 12.0194 21.051 11.7322 20.5H6C5.724 20.5 5.5 20.275 5.5 20V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V11.0764C19.0232 11.1572 19.5258 11.3004 20 11.4982V9.828C20 9.298 19.789 8.789 19.414 8.414ZM13.5 4.621L17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621ZM10.75 17.5H11C11 18.0163 11.0602 18.5185 11.1739 19H10.75C10.3358 19 10 18.6642 10 18.25C10 17.8358 10.3358 17.5 10.75 17.5ZM11.1739 16C11.2986 15.4722 11.4876 14.9693 11.7322 14.5H10.75C10.3358 14.5 10 14.8358 10 15.25C10 15.6642 10.3358 16 10.75 16H11.1739ZM12.8096 13C13.4229 12.3609 14.1656 11.8468 14.9956 11.5H10.75C10.3358 11.5 10 11.8358 10 12.25C10 12.6642 10.3358 13 10.75 13H12.8096ZM7.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.25ZM7 18.25C7 17.8358 7.33579 17.5 7.75 17.5C8.16421 17.5 8.5 17.8358 8.5 18.25C8.5 18.6642 8.16421 19 7.75 19C7.33579 19 7 18.6642 7 18.25ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM17.2206 17.9175C17.0853 17.828 16.9961 17.6745 16.9961 17.5C16.9961 17.4759 16.9978 17.4522 17.0011 17.4291L17 13.4993C17 13.2231 17.2239 12.9993 17.5 12.9993C17.7761 12.9993 18 13.2231 18 13.4993L18.001 17H20.4966C20.7725 17 20.9961 17.2239 20.9961 17.5C20.9961 17.7762 20.7725 18 20.4966 18H17.5606C17.5411 18.0023 17.5213 18.0035 17.5011 18.0035C17.3971 18.0035 17.3006 17.9718 17.2206 17.9175Z" 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_clock_24_regular.svg";

Details

Keywords

paperworkfileanalogtaskchecklistvertical