bold icon

Common uses

• Bold text button in a WYSIWYG editor
• Text style selection in a document editor
• Toggle for bold font weight in a UI

Use it in React

npm i @heroicons/react

import { BoldIcon } from '@heroicons/react/24/outline';

<BoldIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<BoldIcon className="size-6" />

<BoldIcon className="size-6" />

<BoldIcon className="size-6" />

<BoldIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

boldtext boldfont weightstrongemphasis

FAQ

What does the bold icon represent?

The icon visually represents the concept of 'bold' text formatting, often used to emphasize or highlight text.

How do I use the bold icon in React?

You can import and use it in your React application with the following statement: `import { BoldIcon } from '@heroicons/react/24/outline'`.

What is the license for Heroicons?

Heroicons are distributed under the MIT license, which allows for free use in both personal and commercial projects.

Related icons

The same idea in other libraries, and near matches in Heroicons.