---
title: "Components — Icon"
canonical: https://sky-ui.cf.sky.com/components/icon
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Icon

Component to support the use of SVG icons (including Skycons).

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

---

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

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

---

## Props

### $size

- `small`
- `medium (default)`
- `large`

### $color

`$color` takes the name of any predefined [color](/foundations/colours/).

**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](/core/system/display/)
- [margin](/core/system/margin/)