Icons

labbicons packages icon sets as Django components. Write <c-lbi.rmx.heart /> in a template instead of maintaining copied SVG markup. Django renders the icon with the rest of the page.

Install it separately from labb.

Install labbicons

pip install labbicons
# or install alongside labbui
pip install labbui[icons]

Add labbicons to your INSTALLED_APPS:

INSTALLED_APPS = [
    # ... other apps
    'django_cotton',
    'labbicons',
]

Render an icon

Use a direct component tag, the generic icon tag, or the icon prop on a labb component.

<!-- Direct component syntax -->
<c-lbi.rmx.heart w="24" h="24" class="text-red-500" />

<!-- Name attribute syntax -->
<c-lbi n="rmx.heart" w="24" h="24" class="text-red-500" />

<!-- Inside labb components that accept an icon prop -->
<c-lb.button variant="primary" icon="rmx.save">Save</c-lb.button>
<c-lb.badge variant="info" icon="rmx.information">Info</c-lb.badge>

Choose a variant

Most icons have an outlined version and a filled version.

<!-- Outlined version -->
<c-lbi.rmx.camera w="24" h="24" />

<!-- Filled version -->
<c-lbi.rmx.camera w="24" h="24" fill />

Set size and colour

Set the width and height with w and h. Add utility classes as you would on any other element.

<!-- Pixel values -->
<c-lbi.rmx.heart w="16" h="16" />
<c-lbi.rmx.heart w="32" h="32" />

<!-- Em units scale with the font size -->
<c-lbi.rmx.heart w="1em" h="1em" />

<!-- Utility classes -->
<c-lbi.rmx.heart w="24" h="24" class="text-red-500 hover:text-red-700 transition-colors" />

Find an icon

A misspelled icon name produces no icon and no template error. Search before you use a name.

Browse and copy from the icon browser, or search from the command line:

# One search term
labb icons search "arrow"

# Several search terms
labb icons search "arrow,heart,user"

# Available packs
labb icons packs

# Confirm a name
labb icons info rmx.arrow-down

The current release includes Remix. The labb icons reference lists each command and option.

Related