---
name: NavIcon
route: /Icons/NavIcon
menu: Icons
---

import { Playground, PropsTable } from 'docz'
import { NavIcon } from '../../../src'
import { colors } from '@barcard/functions'

## NavIcon

The navigation icons used in BarCard's BCVM. Uses FIcon or MIcon under the hood.

## Basic Usage

<Playground>
  <React.Fragment>
    {[
      {
        quickActionLabel: 'Dashboard',
        iconName: 'pulse',
        iconType: 'custom',
        iconColor: '#7E5EFF',
      },
      {
        quickActionLabel: 'Venue',
        iconName: 'places-home-4',
        iconType: 'custom',
        iconColor: '#5E5EFF',
      },
      {
        quickActionLabel: 'Specials',
        iconName: 'specials',
        iconType: 'custom',
        iconColor: '#98FF5E',
      },
      {
        quickActionLabel: 'Events',
        iconName: 'flash',
        iconType: 'custom',
        iconColor: '#FFD45E',
      },
      {
        quickActionLabel: 'Organization',
        iconName: 'emoticonexcited',
        iconType: 'custom',
        iconColor: '#FF895E',
      },
      {
        quickActionLabel: 'Banking',
        iconName: 'piggy-bank',
        iconType: 'custom',
        iconColor: '#FF5E9E',
      },
      {
        quickActionLabel: 'Menus',
        iconName: 'contentbook',
        iconType: 'custom',
        iconColor: '#FF5E5E',
      },
    ].map(x => (
      <NavIcon
        key={x.iconName}
        iconType={x.iconType}
        iconName={x.iconName}
        color={x.iconColor}
        size={24}
        style={{ marginRight: 15, marginBottom: 15 }}
      />
    ))}
  </React.Fragment>
</Playground>

## Properties

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