Skip to main navigationSkip to main content
Return to Sky UI homepage

Icon List - React

View on FigmaView on GitHub
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.

<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

<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.

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

$iconColor

<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>

<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

<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: