---
name: FIcon
route: /Icons/FIcon
menu: Icons
---

import { Playground, PropsTable } from 'docz'
import { FIcon } from '../../../src'
import { iconNames } from './iconNames' // should really be using the PropTypes to get this.
import { colors } from '@barcard/functions'

## FICon

An icon that uses BarCard's custom icon set.

The naming convention is shorthand for FontelloIcon, as the implementation uses
fontello.

## Basic Usage

<Playground>
  <React.Fragment>
    {iconNames.map(x => (
      <FIcon
        key={x}
        name={x}
        color={colors.teal}
        size={24}
        style={{ marginRight: 15, marginBottom: 15 }}
      />
    ))}
  </React.Fragment>
  {'\n'}
  <React.Fragment>
    {iconNames.map(x => (
      <FIcon
        key={x}
        name={x}
        color={colors.pink}
        size={24}
        style={{ marginRight: 15, marginBottom: 15 }}
      />
    ))}
  </React.Fragment>
  {'\n'}
  <React.Fragment>
    {iconNames.map(x => (
      <FIcon
        key={x}
        name={x}
        color={colors.secondary1}
        size={24}
        style={{ marginRight: 15, marginBottom: 15 }}
      />
    ))}
  </React.Fragment>
</Playground>

## Icon Names

- 'pulse'
- 'disco'
- 'rewards-trophy-5'
- 'car-2'
- 'wallet'
- 'banking-spendings-2'
- 'banking-spendings-1'
- 'bank-note'
- 'rewards-trophy-1'
- 'payment'
- 'rewards-gift-1'
- 'rewards-medal-1'
- 'settings-1'
- 'places-home-4'
- 'mail'
- 'bell'
- 'share-megaphone-2'
- 'ic_face'
- 'camera-1'
- 'specials'
- 'piggy-bank'
- 'rewards-gift'
- 'ticket'
- 'calendar-1'
- 'binoculars'
- 'atomic-bomb'
- 'locationpin'
- 'contentbooksolid'
- 'windflag'
- 'homepage'
- 'pin'
- 'locationmap'
- 'lightbulboutline'
- 'glasscocktailsolid'
- 'localbar'
- 'flash'
- 'emoticonexcited'
- 'contentbook'
- 'write-board'
- 'buildingsixsolid'
- 'disco-ball'

## Properties

<PropsTable of={FIcon} includeDescription={true} />

## To Do

Create a tooltip component that shows the name of the icon.
