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

# Icon Button — React

The Icon Button provides a clickable container for a Skycon.

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

---

The `IconButton` provides an interactive wrapper for a Skycon for supplementary actions.

```tsx
  <IconButton src={informationCircleLinear} />
```

---

## Props

### src

The `src` prop expects a partial SVG `path` of the icon that you want to render. It is recommend to use icons from the Skycons package. See the [Skycons documentation page](/skycons/) for more information.

### $appearance

We provide a light version of the `IconButton` for when we need light UI to sit over a dark background or asset.

- `default`
- `light`

```tsx
<Flex $alignItems="center" $gap={4}>
  <IconButton src={informationCircleLinear} />

  <Box $bgColor="grey80" $padding={3}>
    <IconButton $appearance="light" src={informationCircleLinear} />
  </Box>
</Flex>
```

### $variant

- `solid (default)`
- `minimal`

```tsx
<Flex $alignItems="center" $gap={4}>
  <IconButton $variant="solid" src={informationCircleLinear} />
  <IconButton $variant="minimal" src={informationCircleLinear} />
</Flex>
```

---

### $size

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

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

---

## States

### Disabled

An `IconButton` can be set to `disabled`, however this should only be used when absolutely required such as inactive navigation items, see the [IconButton usage page](/components/icon-button/usage#state-disabled) for more.

```tsx
<Flex $alignItems="center" $gap={4}>
  <IconButton disabled src={informationCircleLinear} />

  <Box $bgColor="grey80" $padding={3}>
    <IconButton $appearance="light" disabled src={informationCircleLinear} />
  </Box>
</Flex>
```

### Hover and Focus

The hover and focus state can be set via `$hover` and `$focused` respectively to override default behaviour.

```tsx
<Flex $alignItems="center" $gap={4}>
  <IconButton $hover src={informationCircleLinear} />
  <IconButton $focused src={informationCircleLinear} />
</Flex>
```

---

## Accessibility

If you are using an `IconButton` without a visual label consider adding `IconButton.HiddenText`. This will support users who need screen readers by providing a visually hidden description.

```jsx
<IconButton src={informationCircleLinear}>
  <IconButton.HiddenText>Contextual Information</IconButton.HiddenText>
</IconButton>
```

---

## System Modifiers

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

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