---
name: Icon
menu: Components
route: /components/icon
---

import { Playground, PropsTable } from 'docz'
import { Icon } from '@personio/ui-components'
import styles from './icon.scss'

# Icon
Use Personio's Icon to render a icon from FontAwesome Library. Currently we've access for the PRO version 5.x.

<PropsTable of={Icon} />

## Examples
Bellow is the simple way to use Personio's Icon.

<Playground>
  <div className="icon-container">
    <Icon name="address-book" />
    <Icon name="comment" color="blue" size={26} />
    <Icon name="map" color="red" type="light" />
  </div>
</Playground>

## Defining size
Use the size prop to change the size of the icon.

<Playground>
  <div className="icon-container">
    <Icon name="address-book" />
    <Icon name="address-book" size={24} />
    <Icon name="address-book" size={32} />
    <Icon name="address-book" size={48} />
    <Icon name="address-book" size={64} />
    <Icon name="address-book" size={72} />
  </div>
</Playground>

## Changing color
Change the color passing a valid css color.

<Playground>
  <div className="icon-container">
    <Icon name="address-book" size={32} color="#000005" />
    <Icon name="address-book" size={32} color="#00001F" />
    <Icon name="address-book" size={32} color="#000038" />
    <Icon name="address-book" size={32} color="#160552" />
    <Icon name="address-book" size={32} color="#2F1E6B" />
    <Icon name="address-book" size={32} color="#493885" />
    <Icon name="address-book" size={32} color="#62519E" />
    <Icon name="address-book" size={32} color="#7C6BB8" />
    <Icon name="address-book" size={32} color="#9584D1" />
    <Icon name="address-book" size={32} color="#AF9EEB" />
    <Icon name="address-book" size={32} color="#C8B7FF" />
  </div>
</Playground>

## Using theme
Change the color using theme

<Playground>
  <div className="icon-container">
    <Icon name="address-book" size={32} theme="danger" />
    <Icon name="address-book" size={32} theme="warning" />
    <Icon name="address-book" size={32} theme="info" />
    <Icon name="address-book" size={32} theme="primary" />
    <Icon name="address-book" size={32} theme="success" />
    <Icon name="address-book" size={32} theme="dark" />
  </div>
</Playground>

## Specifing family
Currently FontAwesome provides for us 3 varations on the weight: regular, light or solid. Use the type property to select.

<Playground>
  <div className="icon-container">
    <Icon name="map" size={32} type="light" />
    <Icon name="map" size={32} type="regular" />
    <Icon name="map" size={32} type="solid" />
  </div>
</Playground>

## Spin animation
Add the spin prop to enable the animation.

<Playground>
  <div className="icon-container">
    <Icon name="spinner-third" size={32} type="solid" spin />
  </div>
</Playground>

## Setting a custom class
You also can either pass a css class to customize the icon.

<Playground>
  <div className="icon-container">
    <Icon name="map" size={32} type="solid" className="icon" />
  </div>
</Playground>