Icon

import { Icon } from '@sky-uk/ui-core';

This component is intended to be used with the @sky-uk/skycons. (See Skycons).

<Flex $alignItems="center" $gap={4}>
  <Icon src={informationCircleLinear} $size="small" />
    <Icon src={informationCircleLinear} />
    <Icon src={informationCircleLinear} $size="large" />
    <Icon src={informationCircleLinear} $color="primary" />
</Flex>

Props

$size

• small
• medium (default)
• large

$colour

$color takes the name of any predefined color.

Gradients are not supported as the icons from the @sky-uk/skycons package are designed for use on interfaces using solid colours only.

Designs calling for an icon coloured with a gradient won't be interface based and should therefore be handled separately as content.

System Modifiers

The Icon component also supports the props applied using the following system modifiers:

• display
• margin