Typography
Icon List
A icon list component
Overview
The Icon List component displays a list of items with an icon beside each entry. It keeps lists scannable and consistent for features, steps, or bullet-style content.
Key Business & UX Benefits
- Makes lists easier to scan with icons that reinforce each item.
- Keeps layout and alignment consistent across the app.
- Supports nested lists for hierarchical content.
- Fits feature lists, steps, and other icon-plus-text patterns.
Pro-Tip from Larry: Use one icon style per list so the list reads as a single unit.
Usage
IconList
Feature List
- Icon plus text per list item with consistent alignment
- Nested list support for hierarchical content
- Configurable icon size and spacing
- Theme-aligned styling for light and dark modes
API Reference
IconList
| Prop | Default | Type |
|---|---|---|
icon | arrows/arrow-right | string |
size | medium | "small" | "medium" | "xs" |
| Slot | Type |
|---|---|
default | any |
IconListItem
| Prop | Default | Type |
|---|---|---|
icon | string |
| Slot | Type |
|---|---|
default | any |