Home Docs Icons in a List

Icons in a List

Replace default list bullets with Iconfyra icons using the icf-ul and icf-li utility classes.

Basic Usage #

Add icf-ul to the list element and wrap each icon in a <span class="icf-li"> inside the list item:

  • Feature one completed
  • Feature two completed
  • Feature three in progress
  • Feature four pending
<ul class="icf-ul">
    <li>
        <span class="icf-li"><i class="icf-solid icf-square-check"></i></span>
        Feature one completed
    </li>
    <li>
        <span class="icf-li"><i class="icf-solid icf-square-check"></i></span>
        Feature two completed
    </li>
    <li>
        <span class="icf-li"><i class="icf-solid icf-spinner-third icf-anim-spin"></i></span>
        Feature three in progress
    </li>
    <li>
        <span class="icf-li"><i class="icf-regular icf-square"></i></span>
        Feature four pending
    </li>
</ul>

Mixed Icons #

Each list item can use a different icon and color, making it easy to build status lists, feature checklists, or pricing comparisons:

  • Unlimited projects
  • Priority support
  • Custom branding
  • Dedicated server
<ul class="icf-ul">
    <li>
        <span class="icf-li"><i class="icf-solid icf-circle-check" style="color: #10b981;"></i></span>
        Unlimited projects
    </li>
    <li>
        <span class="icf-li"><i class="icf-solid icf-circle-xmark" style="color: #ef4444;"></i></span>
        Dedicated server
    </li>
</ul>

Ordered Lists #

You can also use icf-ul on <ol> elements. The icons replace the default numbers visually, but the semantic ordering is preserved for accessibility:

  1. Create your account
  2. Choose a plan
  3. Start building
<ol class="icf-ul">
    <li>
        <span class="icf-li"><i class="icf-solid icf-1"></i></span>
        Create your account
    </li>
    <li>
        <span class="icf-li"><i class="icf-solid icf-2"></i></span>
        Choose a plan
    </li>
    <li>
        <span class="icf-li"><i class="icf-solid icf-3"></i></span>
        Start building
    </li>
</ol>

Customization #

Control the icon column width and list margin with the --icf-li-margin CSS custom property:

  • Wider icon column (3em)
  • More space for larger icons
<!-- Wider icon column -->
<ul class="icf-ul" style="--icf-li-margin: 3em;">
    <li>
        <span class="icf-li"><i class="icf-solid icf-arrow-right"></i></span>
        Wider icon column
    </li>
</ul>
CSS Variable Default Description
--icf-li-margin 2em Width of the icon column and left margin of the list

Class Reference #

Class Applied To Description
icf-ul <ul> or <ol> Removes default bullets and adds left margin for icon column
icf-li <span> wrapping the <i> Absolutely positions the icon in the left column