Check out the all-new Web Awesome AND get an exclusive lifetime discount on Font Awesome!

Icons in a List

Using the power of fixed-width styling, we added some utility styling to handle HTML lists with icons used as decorative bullets.

We’ll cover the basics of how to replace default bullets with icons in unordered lists and introduce options for customizing CSS properties.

Use fa-ul and fa-li to replace default bullets in unordered lists.

List icons can
be used to
replace bullets
in lists

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>

You can also keep the semantics of an ordered list behind the scenes but use icon bullets visually.

Listicons can
be usedto
replace bullets
in lists

<ol class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
</ol>

List Classes

Class	Details
`fa-ul`	Used on a `<ul>` or `<ol>` elements to style icons as list bullets
`fa-li`	Used on individual `<li>` elements to style icons as list bullets

Customization

We’ve added CSS custom properties to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome’s defaults.

CSS Custom Property	Details	Accepted Values
`--fa-li-margin`	Set margin around icon	Any valid CSS `margin` value
`--fa-li-width`	Set width of icon	Any valid CSS `width` value

Listicons can
be usedto
replace bullets
in lists

<ul class="fa-ul" style="--fa-li-width: 2em;">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li" style="--fa-li-width: 4em;"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>

Listicons can
be usedto
replace bullets
in lists

<ul class="fa-ul" style="--fa-li-margin: 1em;">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>