Bootstrap icons

MDB uses a powerful set of icons called Font Awesome.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

One Font, 628 Icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

No JavaScript Required

Fewer compatibility concerns because Font Awesome doesn't require JavaScript.

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

Free, as in Speech

Font Awesome is completely free for commercial use.

CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Perfect on Retina Displays

Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Accessibility-minded

Font Awesome loves screen readers and helps make your icons accessible on the web.

Basic usage

Example: basic icon fa-camera-retro

You can place Font Awesome icons just about anywhere using the Fa React component with the icon's name as icon props. Font Awesome is designed to be used with inline elements.

<Fa icon="camera-retro"/> fa-camera-retro
  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same thing goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger icons

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the size=lg (33% increase), 2x, 3x, 4x, or 5x classes.

<Fa icon="camera-retro" size="lg"/> fa-lg
<Fa icon="camera-retro" size="2x"/> fa-2x
<Fa icon="camera-retro" size="3x"/> fa-3x
<Fa icon="camera-retro" size="4x"/> fa-4x
<Fa icon="camera-retro" size="5x"/> fa-5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Fixed Width Icons

Use fixed to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

<div className="list-group">
    <a className="list-group-item" href="#"><Fa icon="home" fixed/>  Home</a>
    <a className="list-group-item" href="#"><Fa icon="book" fixed/>  Library</a>
    <a className="list-group-item" href="#"><Fa icon="pencil" fixed/>  Applications</a>
    <a className="list-group-item" href="#"><Fa icon="cog" fixed/>  Settings</a>
</div>

List Icons

  • List icons
  • can be used
  • as bullets
  • in lists

Use fa-ul and list to easily replace default bullets in unordered lists.

<ul className="fa-ul">
    <li><Fa icon="check-square" list/>  List icons</li>
    <li><Fa icon="check-square" list/>  can be used</li>
    <li><Fa icon="spinner" list spin/>  as bullets</li>
    <li><Fa icon="square" list/>  in lists</li>
</ul>

Bordered & Pulled Icons

...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Use border and pull="right" or pull="left" for easy pull quotes or article icons.

<Fa icon="quote-left" size="3x" pull="left" border/>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

Animated Icons

Loading... Loading... Loading... Loading... Loading...

Use the spin attribute to get any icon to rotate, and use pulse to have it rotate with 8 steps. Works well with spinner, refresh, and cog.

<Fa icon="spinner" spin size="3x" fixed/>
<span className="sr-only">Loading...</span>

<Fa icon="circle-o-notch" spin size="3x" fixed/>
<span className="sr-only">Loading...</span>

<Fa icon="refresh" spin size="3x" fixed/>
<span className="sr-only">Loading...</span>

<Fa icon="cog" spin size="3x" fixed/>
<span className="sr-only">Loading...</span>

<Fa icon="spinner" pulse size="3x" fixed/>
<span className="sr-only">Loading...</span>

Note: Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.

Note: CSS3 animations aren't supported in IE8 - IE9.


Rotated & Flipped

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

To arbitrarily rotate and flip icons, use the rotate="*" and flip="*".

<Fa icon="shield"/> normal<br/>
<Fa icon="shield" rotate="90"/> fa-rotate-90<br/>
<Fa icon="shield" rotate="180"/> fa-rotate-180<br/>
<Fa icon="shield" rotate="270"/> fa-rotate-270<br/>
<Fa icon="shield" flip="horizontal"/> fa-flip-horizontal<br/>
<Fa icon="shield" flip="vertical"/> fa-flip-vertical

Stacked Icons

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

To stack multiple icons, use the fa-stack class on the parent, the stack="1x" for the regularly sized icon, and stack="2x" for the larger icon. inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing..

<span className="fa-stack fa-lg">
  <Fa icon="square-o" stack="2x"/>
  <Fa icon="twitter" stack="1x"/>
</span>
fa-twitter on fa-square-o<br/>
<span className="fa-stack fa-lg">
  <Fa icon="circle" stack="2x"/>
  <Fa icon="flag" stack="1x" inverse/>
</span>
fa-flag on fa-circle<br/>
<span className="fa-stack fa-lg">
  <Fa icon="square" stack="2x"/>
  <Fa icon="terminal" stack="1x" inverse/>
</span>
fa-terminal on fa-square<br/>
<span className="fa-stack fa-lg">
  <Fa icon="camera" stack="1x"/>
  <Fa icon="ban" stack="2x" className="text-danger"/>
</span>
fa-ban on fa-camera

Full list of icons

To see the full list of available icons click the button below

Icons list