Icon

View on GitHub

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

$color

$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