NavIcon

<div className="docs-inline-group">
  <NavIcon icon="calendar" />
  <NavIcon icon="calendar" state="hover" />
  <NavIcon icon="calendar" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="contacts" />
  <NavIcon icon="contacts" state="hover" />
  <NavIcon icon="contacts" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="dashboard" />
  <NavIcon icon="dashboard" state="hover" />
  <NavIcon icon="dashboard" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="groups" />
  <NavIcon icon="groups" state="hover" />
  <NavIcon icon="groups" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="lead-accelerator" />
  <NavIcon icon="lead-accelerator" state="hover" />
  <NavIcon icon="lead-accelerator" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="leverage" />
  <NavIcon icon="leverage" state="hover" />
  <NavIcon icon="leverage" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="listing-consult" />
  <NavIcon icon="listing-consult" state="hover" />
  <NavIcon icon="listing-consult" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="listings" />
  <NavIcon icon="listings" state="hover" />
  <NavIcon icon="listings" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="maps" />
  <NavIcon icon="maps" state="hover" />
  <NavIcon icon="maps" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="opportunities" />
  <NavIcon icon="opportunities" state="hover" />
  <NavIcon icon="opportunities" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="referrals" />
  <NavIcon icon="referrals" state="hover" />
  <NavIcon icon="referrals" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="resources" />
  <NavIcon icon="resources" state="hover" />
  <NavIcon icon="resources" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="settings" />
  <NavIcon icon="settings" state="hover" />
  <NavIcon icon="settings" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="sketchhouse" />
  <NavIcon icon="sketchhouse" state="hover" />
  <NavIcon icon="sketchhouse" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="smart-plans" />
  <NavIcon icon="smart-plans" state="hover" />
  <NavIcon icon="smart-plans" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="landing-pages" />
  <NavIcon icon="landing-pages" state="hover" />
  <NavIcon icon="landing-pages" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="events" />
  <NavIcon icon="events" state="hover" />
  <NavIcon icon="events" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="growth" />
  <NavIcon icon="growth" state="hover" />
  <NavIcon icon="growth" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="kwvideo" />
  <NavIcon icon="kwvideo" state="hover" />
  <NavIcon icon="kwvideo" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="kwu" />
  <NavIcon icon="kwu" state="hover" />
  <NavIcon icon="kwu" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="transactions" />
  <NavIcon icon="transactions" state="hover" />
  <NavIcon icon="transactions" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="payments" />
  <NavIcon icon="payments" state="hover" />
  <NavIcon icon="payments" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="reports" />
  <NavIcon icon="reports" state="hover" />
  <NavIcon icon="reports" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="month-end-close" />
  <NavIcon icon="month-end-close" state="hover" />
  <NavIcon icon="month-end-close" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="goals" />
  <NavIcon icon="goals" state="hover" />
  <NavIcon icon="goals" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="invoicing" />
  <NavIcon icon="invoicing" state="hover" />
  <NavIcon icon="invoicing" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="admin" />
  <NavIcon icon="admin" state="hover" />
  <NavIcon icon="admin" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="task-manager" />
  <NavIcon icon="task-manager" state="hover" />
  <NavIcon icon="task-manager" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="recruits" />
  <NavIcon icon="recruits" state="hover" />
  <NavIcon icon="recruits" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="directory" />
  <NavIcon icon="directory" state="hover" />
  <NavIcon icon="directory" state="active" />
</div>
<div className="docs-inline-group">
  <NavIcon icon="royalty-cap" />
  <NavIcon icon="royalty-cap" state="hover" />
  <NavIcon icon="royalty-cap" state="active" />
</div>