---
title: "Icon List — React"
canonical: https://sky-ui.cf.sky.com/components/icon-list/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.3.0"}]
---

# Icon List — React

Icon lists are used as an alternative to bullet or numbered lists.

```js
import { IconList } from '@sky-uk/ui-core';
```

Icon-based list component that can be used to list RTB's or list other contextual points. Icons are provided by [Skycons](/skycons/developer-quickstart/).

```tsx
<IconList $size="small">
  <IconList.Item src={tickLinear}>First item</IconList.Item>
  <IconList.Item src={tickLinear}>Second item</IconList.Item>
  <IconList.Item src={tickLinear}>Third item</IconList.Item>
</IconList>
```

---

## Props

### $appearance

```tsx
<IconList $appearance="light">
  <IconList.Item>First item</IconList.Item>
  <IconList.Item>Second item</IconList.Item>
  <IconList.Item>Third item</IconList.Item>
</IconList>
```

### $size

- `small`
- `medium`
- `large`

`$size` property changes font-size and line-height of the text.

```tsx
<IconList $size="large">
  <IconList.Item>First item</IconList.Item>
  <IconList.Item>Second item</IconList.Item>
  <IconList.Item>Third item</IconList.Item>
</IconList>
```

---

### $iconColor

```tsx
<IconList $iconColor="positive">
  <IconList.Item src={tickCircleSolid}>First item</IconList.Item>
  <IconList.Item src={tickCircleSolid}>Second item</IconList.Item>
  <IconList.Item src={tickCircleSolid}>Third item</IconList.Item>
</IconList>
```

```tsx
<IconList $iconColor="positive">
  <IconList.Item src={tickCircleSolid}>First item</IconList.Item>
  <IconList.Item src={tickCircleSolid}>Second item</IconList.Item>
  <IconList.Item src={crossCircleSolid} $iconColor="negative">Third item</IconList.Item>
</IconList>
```

---

### src

```tsx
<IconList>
  <IconList.Item src={appsLinear}>First item</IconList.Item>
  <IconList.Item src={calendarLinear}>Second item</IconList.Item>
  <IconList.Item src={bellLinear}>Third item</IconList.Item>
</IconList>
```

---

## System Modifiers

The `IconList` component supports the props applied using the following system modifiers:

- [display](/core/system/display/)
- [margin](/core/system/margin/)
- [width](/core/system/width/)