# Icons

Shipped comes with the react-icons package installed.

It is the most complete icons package, with many sets already present.

You can find the whole set here: <https://react-icons.github.io/react-icons/>

Using the icons is straight forward.

For instance, for the icon set Tabler Icons (one of my favourites) you can import and icon like this:

```jsx
import { TbSquareRoundedX } from "@react-icons/tb"

<TbSquareRoundedX />
```

It will render:

<div align="left"><figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FoeFkfpkbBvq8sKl5JGTC%2Fimage.png?alt=media&#x26;token=b22898bd-c1c2-49f4-8ea1-002959d9919f" alt=""><figcaption></figcaption></figure></div>

The icons are SVG, so you can style them with normal CSS rules.

I style them this way using ChakraUI:

```jsx
<Flex
    color="brand.500" // change the icon color
>
    <TbSquareRoundedX />
</Flex>
```