Icon List

List of items with icons.

Changing the icon

Use the prop icon to render any icon from the Iconography

Icon color

color?: string

Use the prop color to change the color of the icon. The default value is currentColor. You can read more about currentColor here

Icon title

iconTitle?: string

Title allows you to insert invisible text for assistive software like screen readers. It's added as a title to the svg, has no effect on layout and is translatable by Google's translation service.

If the icon is purely decorative, it does not need to have a title.

Text size

textSize?: FontSizeStep

The font size of the list content can be controlled and changed using the prop textSize. The default value is mouse.

Icon size

iconSize?: BulbTypeStep

The size of the icon can be controlled and changed using the prop iconSize. The default value is undefined.


align?: 'middle' | 'top'

The alignment of the text can be set to "middle" in the case of a large icon. By default the text is aligned to the top, which conforms to our design specifications for multiline list items.


spacing?: BulbSpacingStep

The spacing between the icon list items can be customised:

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.