Text Bullet List Square icon
Used in general type creation and editing scenarios. The Text Bullet List Square icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Text Bullet List Square 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 { TextBulletListSquare24Regular, TextBulletListSquare24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextBulletListSquare24Regular aria-label="Text Bullet List Square" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_bullet_list_square_24_regular.svg" width="24" height="24" alt="Text Bullet List Square"> 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.75H16.7499C17.1642 12.75 17.4999 12.4142 17.4999 12C17.4999 11.5858 17.1642 11.25 16.7499 11.25H11.2501ZM10.5001 15.75C10.5001 15.3358 10.8358 15 11.2501 15H16.7499C17.1642 15 17.4999 15.3358 17.4999 15.75C17.4999 16.1642 17.1642 16.5 16.7499 16.5H11.2501C10.8358 16.5 10.5001 16.1642 10.5001 15.75ZM8.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.75ZM6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25Z" 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_24_regular.svg";Details
| Name | Text Bullet List Square |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_bullet_list_square_24_regular.svg |
| Filled file | ic_fluent_text_bullet_list_square_24_filled.svg |
| React components | TextBulletListSquare24Regular, TextBulletListSquare24Filled |
| License | MIT (© Microsoft Corporation) |