---
name: 3.3 - Icon
route: /icon
order: 85
menu: 3. Components
---

import { Playground, PropsTable } from 'docz'
import { Icon } from '../'

# Icon
This component aims to offer an easy way to show a [FontAwesome](https://fontawesome.com/) icon.
It provides +1000 icons out of box and some props to easily customize. To show all the icons available, press [here](https://fontawesome.com/icons).

<PropsTable of={Icon} />

## Basic usage

<Playground>
  <Icon name="coffee" />
</Playground>

## Size

<Playground>
  <Icon name="coffee" size="1x" />
  <Icon name="coffee" size="2x" />
  <Icon name="coffee" size="3x" />
  <Icon name="coffee" size="4x" />
  <Icon name="coffee" size="5x" />
  <Icon name="coffee" size="6x" />
  <Icon name="coffee" size="7x" />
  <Icon name="coffee" size="8x" />
</Playground>

## Spin

<Playground>
  <Icon name="cog" spin size="2x" />
</Playground>

## Pulse

<Playground>
  <Icon name="cog" pulse size="2x" />
</Playground>

## Border

<Playground>
  <Icon name="coffee" border size="4x"  />
</Playground>

## Flip

<Playground>
  <Icon name="coffee" flip="horizontal" size="4x"  />
  <Icon name="coffee" flip="vertical" size="4x"  />
  <Icon name="coffee" flip="both" size="4x"  />
</Playground>

## Color

<Playground>
  <Icon name="coffee" color="tomato" size="4x"  />
  <Icon name="coffee" color="green" size="4x"  />
  <Icon name="coffee" color="blue" size="4x"  />
</Playground>

