Text Bullet List icon

Use the Text Bullet List 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 { TextBulletList24Regular, TextBulletList24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextBulletList24Regular aria-label="Text Bullet List" />;
}

Use it in HTML

Reference the SVG file directly:

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

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="M3.24929 17.5C3.93925 17.5 4.49858 18.0593 4.49858 18.7493C4.49858 19.4393 3.93925 19.9986 3.24929 19.9986C2.55933 19.9986 2 19.4393 2 18.7493C2 18.0593 2.55933 17.5 3.24929 17.5ZM6.75 18H21.25C21.6642 18 22 18.3358 22 18.75C22 19.1297 21.7178 19.4435 21.3518 19.4932L21.25 19.5H6.75C6.33579 19.5 6 19.1642 6 18.75C6 18.3703 6.28215 18.0565 6.64823 18.0068L6.75 18H21.25H6.75ZM3.24929 11C3.93925 11 4.49858 11.5593 4.49858 12.2493C4.49858 12.9393 3.93925 13.4986 3.24929 13.4986C2.55933 13.4986 2 12.9393 2 12.2493C2 11.5593 2.55933 11 3.24929 11ZM6.75 11.5H21.25C21.6642 11.5 22 11.8358 22 12.25C22 12.6297 21.7178 12.9435 21.3518 12.9932L21.25 13H6.75C6.33579 13 6 12.6642 6 12.25C6 11.8703 6.28215 11.5565 6.64823 11.5068L6.75 11.5H21.25H6.75ZM3.24929 4.5C3.93925 4.5 4.49858 5.05933 4.49858 5.74929C4.49858 6.43925 3.93925 6.99858 3.24929 6.99858C2.55933 6.99858 2 6.43925 2 5.74929C2 5.05933 2.55933 4.5 3.24929 4.5ZM6.75 5H21.25C21.6642 5 22 5.33579 22 5.75C22 6.1297 21.7178 6.44349 21.3518 6.49315L21.25 6.5H6.75C6.33579 6.5 6 6.16421 6 5.75C6 5.3703 6.28215 5.05651 6.64823 5.00685L6.75 5H21.25H6.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/text_bullet_list_24_regular.svg";

Details

Keywords

typetexttypographyeditcreate