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

import { Playground, PropsTable } from 'docz';

import Icon, { LodgingIcon, TicketIcon, RentalIcon, TransferIcon } from './';

import ActivityIcon from 'react-feather/dist/icons/activity';
import BellIcon from 'react-feather/dist/icons/bell';

# Icons

## Custom icons

These are the lodging, ticket, rental and transfer icons.

## Usage

```javascript
import { LodgingIcon, TicketIcon, RentalIcon, TransferIcon } from '@snowpak/powpow';

export default () => (
  <LodgingIcon />;
);
```

## Props

<PropsTable of={LodgingIcon} />

## Examples

<Playground>
  <LodgingIcon data-cy="sp-icon--lodging" />
  <br />
  <TicketIcon data-cy="sp-icon--ticket" />
  <br />
  <RentalIcon data-cy="sp-icon--rental" />
  <br />
  <TransferIcon data-cy="sp-icon--transfer" />
</Playground>

<Playground>
  <TicketIcon
    height="40px"
    colour="red"
    data-cy="sp-icon--ticketVariableHeight"
  />
  <br />
  <TransferIcon
    height="80px"
    colour="blue"
    data-cy="sp-icon--transferVariableColour"
  />
</Playground>

## Generic icons

This is used to normalised any SVG icon. By default it sets the `height` to `24px`.

## Usage

```javascript
import Icon from '@snowpak/powpow';
import ActivityIcon from 'react-feather/dist/icons/activity';

export default () => (
  <Icon icon={<ActivityIcon />} />;
);
```

## Props

<PropsTable of={Icon} />

## Examples

<Playground>
  <Icon icon={<ActivityIcon />} data-cy="sp-icon--genericIcon" />
</Playground>

<Playground>
  <Icon
    icon={<BellIcon />}
    height="80px"
    data-cy="sp-icon--genericVariableHeight"
  />
</Playground>