Icon list
Added in 1.7.0
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.
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.
<ul class="list-icon">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Unlimited projects
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Priority support
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Custom domains
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Advanced analytics
</li>
</ul>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.
<ul class="list-icon" style="--tblr-list-icon-color: var(--tblr-green)">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Unlimited projects
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Priority support
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Custom domains
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-red">
<path d="M5 12l5 5l10 -10" />
</svg> No phone support
</li>
</ul>Different icons
Each entry can use its own icon. Combine icons and colors to show a status, for example the steps of a setup.
<ul class="list-icon">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/circle-check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-green">
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
<path d="M9 12l2 2l4 -4" />
</svg> Account created
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/circle-check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-green">
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
<path d="M9 12l2 2l4 -4" />
</svg> Email confirmed
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/progress -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-blue">
<path d="M10 20.777a8.942 8.942 0 0 1 -2.48 -.969" />
<path d="M14 3.223a9.003 9.003 0 0 1 0 17.554" />
<path d="M4.579 17.093a8.961 8.961 0 0 1 -1.227 -2.592" />
<path d="M3.124 10.5c.16 -.95 .468 -1.85 .9 -2.675l.169 -.305" />
<path d="M6.907 4.579a8.954 8.954 0 0 1 3.093 -1.356" />
</svg> Profile in progress
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/circle-dashed -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M8.56 3.69a9 9 0 0 0 -2.92 1.95" />
<path d="M3.69 8.56a9 9 0 0 0 -.69 3.44" />
<path d="M3.69 15.44a9 9 0 0 0 1.95 2.92" />
<path d="M8.56 20.31a9 9 0 0 0 3.44 .69" />
<path d="M15.44 20.31a9 9 0 0 0 2.92 -1.95" />
<path d="M20.31 15.44a9 9 0 0 0 .69 -3.44" />
<path d="M20.31 8.56a9 9 0 0 0 -1.95 -2.92" />
<path d="M15.44 3.69a9 9 0 0 0 -3.44 -.69" />
</svg> Add a payment method
</li>
</ul>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.
<ul class="list-icon" style="--tblr-list-icon-color: var(--tblr-green)">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Unlimited projects
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Priority support
</li>
<li class="text-secondary">
<!-- Download SVG icon from http://tabler.io/icons/icon/x -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-secondary">
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg> Custom domains
</li>
<li class="text-secondary">
<!-- Download SVG icon from http://tabler.io/icons/icon/x -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-secondary">
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg> Advanced analytics
</li>
</ul>Inline
Add .list-icon-inline to show short entries in a row that wraps, for example the highlights under a product name.
<ul class="list-icon list-icon-inline" style="--tblr-list-icon-color: var(--tblr-green)">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Free shipping
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> 30-day returns
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> 2-year warranty
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> In stock
</li>
</ul>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.
<ul class="list-icon">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/shield-check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-green">
<path d="M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06" />
<path d="M15 19l2 2l4 -4" />
</svg> Two-factor authentication keeps the account safe even when the password leaks.
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/cloud-upload -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-blue">
<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />
<path d="M9 15l3 -3l3 3" />
<path d="M12 12l0 9" />
</svg> Backups run every night and are kept for thirty days in a separate region.
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/headset -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-purple">
<path d="M4 14v-3a8 8 0 1 1 16 0v3" />
<path d="M18 19c0 1.657 -2.686 3 -6 3" />
<path d="M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3" />
<path d="M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3" />
</svg> Support answers within one business day.
</li>
</ul>Pros and cons
Put two lists side by side to compare: green checks on one side, red crosses on the other.
<div class="row g-3">
<div class="col-6">
<ul class="list-icon" style="--tblr-list-icon-color: var(--tblr-green)">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Fast to set up
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> No vendor lock-in
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Great documentation
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-icon" style="--tblr-list-icon-color: var(--tblr-red)">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/x -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg> No built-in auth
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/x -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg> Smaller community
</li>
</ul>
</div>
</div>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.
<ul class="list-icon" style="--tblr-list-icon-color: var(--tblr-green); --tblr-list-icon-row-gap: 1rem">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg>
<div>
<div class="fw-medium">Unlimited projects</div>
<div class="text-secondary small">Create as many projects as you need, with no extra charge.</div>
</div>
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg>
<div>
<div class="fw-medium">Priority support</div>
<div class="text-secondary small">Your questions go to the top of the queue.</div>
</div>
</li>
</ul>Links
The marker can describe the entry instead of ticking it off, for example in a list of contact details with links.
<ul class="list-icon">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/mail -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" />
<path d="M3 7l9 6l9 -6" />
</svg>
<a href="#">
<a href="mailto:[email protected]">[email protected]</a>
</a>
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/phone -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
</svg>
<a href="#">+1 (555) 123-4567</a>
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/map-pin -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0" />
</svg> 1 Market Street, San Francisco
</li>
</ul>Custom look
Set the --tblr-list-icon-* variables on the list to change the size of the markers and the gaps between the entries.
<ul class="list-icon fs-3" style="--tblr-list-icon-size: 1.5rem; --tblr-list-icon-row-gap: 1rem; --tblr-list-icon-color: var(--tblr-primary)">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Unlimited projects
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Priority support
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M5 12l5 5l10 -10" />
</svg> Custom domains
</li>
</ul>Accessibility
- Use a real list element,
ulorol, 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-hiddentext, such as "Included" or "Not included".
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
list-icon | component | The list, on a ul, ol or div |
icon | part | The first icon in an entry becomes its marker |
list-icon-inline | direction | Lays the entries out in a row that wraps |
text-{color} | color | Colors the marker of one entry, for example text-green on the icon |
CSS
Variables
The component uses local CSS variables
on .list-icon for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_lists.scss.
--list-icon-gap: #{$list-icon-gap};
--list-icon-row-gap: #{$list-icon-row-gap};
--list-icon-inline-gap: #{$list-icon-inline-gap};
--list-icon-size: #{$list-icon-size};
--list-icon-color: #{$list-icon-color};Sass variables
Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.
$list-icon-gap: 0.5rem;
$list-icon-row-gap: 0.5rem;
$list-icon-inline-gap: 1.5rem;
$list-icon-size: 1rem;
$list-icon-color: var(--secondary);
