Text Bullet List Square Warning icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 9.25C8.30228 9.25 8.75 8.80228 8.75 8.25C8.75 7.69772 8.30228 7.25 7.75 7.25C7.19772 7.25 6.75 7.69772 6.75 8.25C6.75 8.80228 7.19772 9.25 7.75 9.25ZM11.25 7.5C10.8358 7.5 10.5 7.83579 10.5 8.25C10.5 8.66421 10.8358 9 11.25 9H16.75C17.1642 9 17.5 8.66421 17.5 8.25C17.5 7.83579 17.1642 7.5 16.75 7.5H11.25ZM11.2501 11.25C10.8358 11.25 10.5001 11.5858 10.5001 12C10.5001 12.4142 10.8358 12.75 11.2501 12.75H15.0823L15.2655 12.3833C15.5304 11.8532 15.9366 11.4754 16.4029 11.25H11.2501ZM11.2501 15H13.9582L13.2088 16.5H11.2501C10.8358 16.5 10.5001 16.1642 10.5001 15.75C10.5001 15.3358 10.8358 15 11.2501 15ZM6.25 19.5H11.71L11.2699 20.3809C11.1683 20.5843 11.0972 20.792 11.054 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V14.9045L19.7404 12.3833C19.6698 12.242 19.5892 12.1115 19.5 11.9918V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5ZM8.75 12C8.75 12.5523 8.30228 13 7.75 13C7.19772 13 6.75 12.5523 6.75 12C6.75 11.4477 7.19772 11 7.75 11C8.30228 11 8.75 11.4477 8.75 12ZM7.75 16.75C8.30228 16.75 8.75 16.3023 8.75 15.75C8.75 15.1977 8.30228 14.75 7.75 14.75C7.19772 14.75 6.75 15.1977 6.75 15.75C6.75 16.3023 7.19772 16.75 7.75 16.75ZM16.161 12.8301C16.7141 11.7233 18.2938 11.7233 18.8468 12.8301L22.8437 20.8284C23.3424 21.8263 22.6165 23 21.5008 23H13.507C12.3913 23 11.6654 21.8262 12.1641 20.8284L16.161 12.8301ZM18.0043 15.4956C18.0043 15.2193 17.7803 14.9954 17.5039 14.9954C17.2276 14.9954 17.0035 15.2193 17.0035 15.4956V18.4974C17.0035 18.7737 17.2276 18.9976 17.5039 18.9976C17.7803 18.9976 18.0043 18.7737 18.0043 18.4974V15.4956ZM17.5039 20.9988C17.7803 20.9988 18.0043 20.7748 18.0043 20.4985C18.0043 20.2222 17.7803 19.9982 17.5039 19.9982C17.2276 19.9982 17.0035 20.2222 17.0035 20.4985C17.0035 20.7748 17.2276 20.9988 17.5039 20.9988Z" 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_square_warning_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatetasktodostepsgoals