Icons

Add icons inline using Phosphor Icons.

Basic Usage

The icon represents getting started.

Click the settings icon to configure.

Use for success and for errors.

Weights

Phosphor icons come in six weights:

Regular

Bold

Fill

Light

Thin

Duotone

In Headings

Getting Started

Configuration

Documentation

In Lists

Install dependencies
Configure settings
Deploy to production

Common Icons

Icon	Name
	`rocket-launch`
	`book-open`
	`code`
	`gear-six`
	`warning`
	`check-circle`
	`x-circle`
	`info`
	`lightning`
	`download`
	`link`
	`eye`
	`pencil-simple`
	`trash`
	`plus`

Finding Icons

Browse the complete library at Phosphor Icons.

Use the icon name exactly as shown, with hyphens:

rocket-launch (not rocketLaunch)
gear-six (not gear6 or gearSix)
arrow-right (not arrowRight)

Syntax

:icon-name:
:icon-name:weight:

Examples:

The :rocket-launch: icon represents getting started.
Click the :gear-six: settings icon to configure.

:heart:          Regular (default)
:heart:bold:     Bold
:heart:fill:     Fill

Reference

Feature	Syntax	Description
Icon	`:icon-name:`	Renders icon with regular weight
Weight	`:icon-name:weight:`	Renders icon with specified weight

Weight	Description
`regular`	Default outline style
`bold`	Thicker strokes
`fill`	Solid filled
`light`	Thinner strokes
`thin`	Thinnest strokes
`duotone`	Two-tone style

Edit this page

Last updated 14 minutes ago

Was this page helpful?