# Icon list
> An icon list replaces the bullets of a list with icons, such as a check mark in a list of features, a plan's benefits or the steps of a setup.
Show a list with icon markers instead of bullets. Change the icon and the color per list or per entry, or lay the entries out in a row.
Source: https://docs.tabler.io/ui/components/icon-list
---
## Default markup
Add `.list-icon` to a list and start each entry with an icon. The first icon in an entry is the marker: it sits in front of the text, centered on the first line, in the secondary color.
```html
Unlimited projects
Priority support
Custom domains
Advanced analytics
```
## Color
Color all markers at once with the `--tblr-list-icon-color` variable on the list. A `text-{color}` utility on one icon colors that marker only.
```html
Unlimited projects
Priority support
Custom domains
No phone support
```
## Different icons
Each entry can use its own icon. Combine icons and colors to show a status, for example the steps of a setup.
```html
Account created
Email confirmed
Profile in progress
Add a payment method
```
## Included and excluded
In a pricing table, use a check for what the plan has and a muted cross for what it lacks. Mute the whole entry with `.text-secondary` so the text reads as unavailable too.
```html
Unlimited projects
Priority support
Custom domains
Advanced analytics
```
## Inline
Add `.list-icon-inline` to show short entries in a row that wraps, for example the highlights under a product name.
```html
Free shipping
30-day returns
2-year warranty
In stock
```
## Long entries
When an entry wraps to more lines, the marker stays on the first line. The marker follows the line height of the list, so it also fits small or large text.
```html
Two-factor authentication keeps the account safe even when the password leaks.
Backups run every night and are kept for thirty days in a separate region.
Support answers within one business day.
```
## Pros and cons
Put two lists side by side to compare: green checks on one side, red crosses on the other.
```html
Fast to set up
No vendor lock-in
Great documentation
No built-in auth
Smaller community
```
## Entries with a description
An entry can hold more than one line: wrap the content in an element with a title and a muted description. The marker stays next to the title. Raise `--tblr-list-icon-row-gap` to give the entries more room.
```html
Unlimited projects
Create as many projects as you need, with no extra charge.
Priority support
Your questions go to the top of the queue.
```
## Links
The marker can describe the entry instead of ticking it off, for example in a list of contact details with links.
```html
```
## Custom look
Set the `--tblr-list-icon-*` variables on the list to change the size of the markers and the gaps between the entries.
```html
Unlimited projects
Priority support
Custom domains
```
## Accessibility
- Use a real list element, `ul` or `ol`, so screen readers announce the number of entries and let the user jump between them.
- The icons are decorative, so screen readers skip them. When the icon carries meaning, for example a check against a cross, add the meaning as a `.visually-hidden` text, such as "Included" or "Not included".