### Examples

**Available Icons**

```
<Icon name='calendar' />
```

```
<Icon name='camera' />
```

```
<Icon name='chat' />
```

```
<Icon name='check' />
```

```
<Icon name='chevron' />
```

```
<Icon name='clock' />
```

```
<Icon name='close' />
```

```
<Icon name='cog' />
```

```
<Icon name='dollar' />
```

```
<Icon name='download' />
```

```
<Icon name='dropdown' />
```

```
<Icon name='edit' />
```

```
<Icon name='euro' />
```

```
<Icon name='flip' />
```

```
<Icon name='heart' />
```

```
<Icon name='home' />
```

```
<Icon name='image' />
```

```
<Icon name='info' />
```

```
<Icon name='like' />
```

```
<Icon name='link' />
```

```
<Icon name='loading' />
```

```
<Icon name='lock' />
```

```
<Icon name='mail' />
```

```
<Icon name='menu' />
```

```
<Icon name='minus' />
```

```
<Icon name='mobile' />
```

```
<Icon name='phone' />
```

```
<Icon name='pin' />
```

```
<Icon name='play' />
```

```
<Icon name='plus' />
```

```
<Icon name='portrait' />
```

```
<Icon name='pound' />
```

```
<Icon name='reply' />
```

```
<Icon name='rotate' />
```

```
<Icon name='search' />
```

```
<Icon name='share' />
```

```
<Icon name='smiley' />
```

```
<Icon name='sms' />
```

```
<Icon name='star' />
```

```
<Icon name='target' />
```

```
<Icon name='trash' />
```

```
<Icon name='upload' />
```

```
<Icon name='user' />
```

```
<Icon name='users' />
```

```
<Icon name='video' />
```

```
<Icon name='warning' />
```

```
<Icon name='yen' />
```

```
<Icon name='walk' />
```

```
<Icon name='run' />
```

```
<Icon name='ride' />
```

```
<Icon name='swim' />
```

```
<Icon name='hike' />
```

```
<Icon name='wheelchair' />
```

```
<Icon name='elevation' />
```

```
<Icon name='duration' />
```


**Social / Providers**

```
<Icon name='facebook' color='facebook' />
```

```
<Icon name='twitter' color='twitter' />
```

```
<Icon name='instagram' color='instagram' />
```

```
<Icon name='youtube' color='youtube' />
```

```
<Icon name='linkedin' color='linkedin' />
```

```
<Icon name='google' color='google' />
```

```
<Icon name='vimeo' color='vimeo' />
```

```
<Icon name='justgiving' color='justgiving' />
```

```
<Icon name='strava' color='strava' />
```

```
<Icon name='mapmyfitness' color='mapmyfitness' />
```

```
<Icon name='fitbit' color='fitbit' />
```

```
<Icon name='eventbrite' />
```

```
<Icon name='slack' color='slack' />
```

```
<Icon name='whatsapp' color='whatsapp' />
```

```
<Icon name='pinterest' color='pinterest' />
```

```
<Icon name='messenger' color='messenger' />
```

```
<Icon name='reddit' color='reddit' />
```

```
<Icon name='tumblr' color='tumblr' />
```

```
<Icon name='snapchat' color='snapchat' />
```

```
<Icon name='nextdoor' color='nextdoor' />
```

**Colors**

```
<Icon name='chevron' color='primary' />
```

```
<Icon name='warning' color='#ff0000' />
```


**Spin**

```
<Icon name='loading' spin />
```

```
<Icon name='rotate' spin />
```

**Rotate**

```
<Icon name='chevron' rotate={90} />
```

```
<Icon name='chevron' rotate={180} />
```

```
<Icon name='chevron' rotate={270} />
```

```
<Icon name='chevron' />
```


**Custom Icon**

```
<Icon paths={[{ d: 'M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z' }]} />
```


**Custom SVG viewbox size**

```
<Icon color='primary' size={3.5} viewBox={98} paths={[{ d: 'M48.7340502,21.4921049 C42.9930502,21.4921049 37.8630502,24.9158472 35.6610502,30.2178995 C33.4590502,35.5229508 34.6600502,41.5767269 38.7210502,45.6402342 C41.2330502,48.1523114 44.5710502,49.6217716 48.1220502,49.775715 C48.3430502,49.7857114 48.5520502,49.8426904 48.7380502,49.9376556 C48.9230502,49.8426904 49.1310502,49.7857114 49.3530502,49.775715 C51.0040502,49.7037415 52.6170502,49.3468726 54.1480502,48.7131054 C59.4570502,46.5169122 62.8880502,41.3847974 62.8880502,35.6409074 C62.8880502,27.8457709 56.5450502,21.4991024 48.7470502,21.4921049 L48.7340502,21.4921049 Z M28.5000502,73.4410217 L69.5000502,73.4410217 L69.5000502,62.1231792 C69.4840502,59.6161002 68.4880502,57.2559672 66.6960502,55.4896161 C64.9040502,53.7222653 62.5450502,52.7966053 60.0130502,52.7736138 L49.4190502,52.7736138 C49.1730502,52.7736138 48.9420502,52.7146354 48.7370502,52.6106736 C48.5330502,52.7146354 48.3020502,52.7736138 48.0570502,52.7736138 L37.9970502,52.7736138 L37.9330502,52.7736138 C35.4290502,52.7736138 33.0810502,53.7362601 31.3040502,55.4896161 C29.5120502,57.2569668 28.5170502,59.6161002 28.5000502,62.1321759 L28.5000502,73.4410217 Z M71.0000502,76.43992 L27.0000502,76.43992 C26.1720502,76.43992 25.5000502,75.7681668 25.5000502,74.9404708 L25.5000502,62.1231792 C25.5220502,58.7954017 26.8350502,55.6855441 29.1970502,53.3554001 C31.5400502,51.0442491 34.6360502,49.7737158 37.9220502,49.7737158 C37.9510502,49.7737158 37.9790502,49.7747154 38.0060502,49.7747154 L39.0190502,49.7747154 C38.1590502,49.1829328 37.3490502,48.5101799 36.5990502,47.7594557 C31.6770502,42.8352646 30.2210502,35.4979599 32.8910502,29.0683218 C35.5580502,22.6426823 41.7760502,18.4932066 48.7340502,18.4932066 L48.7500502,18.4932066 C58.2000502,18.5022033 65.8880502,26.1943776 65.8880502,35.6409074 C65.8880502,41.3847974 63.0580502,46.6218736 58.4540502,49.7747154 L60.0040502,49.7747154 C63.3200502,49.8017055 66.4410502,51.0242564 68.8030502,53.3554001 C71.1650502,55.6845445 72.4780502,58.7944021 72.5000502,62.1131829 L72.5000502,74.9404708 C72.5000502,75.7681668 71.8290502,76.43992 71.0000502,76.43992 L71.0000502,76.43992 Z M48.9120502,98 C35.8470502,98 23.0900502,92.7449304 13.6270502,82.8775552 C13.0540502,82.2807744 13.0740502,81.3301236 13.6720502,80.757334 C14.2700502,80.1845445 15.2180502,80.2025378 15.7930502,80.8023175 C28.8610502,94.4313109 48.6300502,98.6897466 66.1530502,91.6493329 C83.6770502,84.6089192 95.0000502,67.8610714 95.0000502,48.9820066 C95.0000502,23.6273206 74.3640502,2.99889836 49.0000502,2.99889836 C23.6360502,2.99889836 3.00005024,23.6273206 3.00005024,48.9820066 L3.00005024,48.9900037 C2.99005024,56.7971357 4.99605024,64.5262965 8.80005024,71.3427924 C9.20405024,72.0665266 8.94405024,72.9791913 8.22105024,73.383043 C7.49605024,73.785895 6.58405024,73.5269901 6.18005024,72.8042556 C2.12605024,65.5389245 -0.0119497624,57.3009507 5.0237645e-05,48.9800073 L5.0237645e-05,48.9800073 C5.0237645e-05,21.9729283 21.9820502,0 49.0000502,0 C76.0190502,0 98.0000502,21.9729283 98.0000502,48.9820066 C98.0000502,69.092619 85.9390502,86.9320658 67.2720502,94.4313109 C61.2940502,96.8324289 55.0670502,98 48.9120502,98 L48.9120502,98 Z' }]} />
```

**Button**

```
import ButtonGroup from '../button-group';
import Button from '../button';

<ButtonGroup>
  <Button>
    <span>Proceed</span>
    <Icon name='chevron' />
  </Button>
  <Button>
    <Icon name='chevron' rotate={180} />
    <span>Back</span>
  </Button>
  <Button>
    <span>Donate Now</span>
    <Icon name='heart' />
  </Button>
</ButtonGroup>
```

**Custom Styles**

```
<Icon name='heart' size={4} styles={{
  fill: 'transparent',
  stroke: 'purple',
  strokeDasharray: 2
}} />
```
