numbered list icon

Common uses

• Displaying ordered steps in a tutorial
• Indicating a ranked or priority list
• Representing an outline or structured content

Use it in React

npm i @heroicons/react

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

<NumberedListIcon className="size-6" />

Styles

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

<NumberedListIcon className="size-6" />

<NumberedListIcon className="size-6" />

<NumberedListIcon className="size-6" />

<NumberedListIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

numberedlistordered listsequencestepsoutline

FAQ

What does the numbered list icon represent?

It signifies an ordered sequence or a list where the order of items is important, such as steps or rankings.

How do I use this icon in React?

Import it as NumberedListIcon from '@heroicons/react/24/outline' and use it in your JSX like <NumberedListIcon className="h-6 w-6" />.

What is the license for this icon?

The Heroicons library, including this icon, is available under the MIT license.

Related icons

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