About Font Awesome 5

  • Font Awesome 5 is a SVG-based framework that gives you all the benefits of using SVG icons on the web.
  • Font Awesome on GitHub.
  • A complete list of available icons is available in the icon gallery.


        <i class="fas fa-images text-primary fa-5x"></i>

Icon color

Font Awesome 5 icons automatically inherit the color of the associated class or container around them.

  • Use either a colored circle with a white icon, or a colored icon; not both together. If necessary, you may use a dark circle to add emphasis to warning icons.
  • Always ensure final icon usage is 508 compliant for color contrast.
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-primary"><i class="fas fa-cloud fa-2x"></i></span><div>Primary</div><div class="text-muted">.text-primary</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-info"><i class="fas fa-bell fa-2x"></i></span><div>Info</div><div class="text-muted">.text-info</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-success"><i class="fas fa-check-circle fa-2x"></i></span><div>Success</div><div class="text-muted">.text-success</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-warning"><i class="fas fa-exclamation-triangle fa-2x"></i></span><div>Warning</div><div class="text-muted">.text-warning</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-danger"><i class="fas fa-exclamation fa-2x"></i></span><div>Danger</div><div class="text-muted">.text-danger</div></div>

System Icons

  • System icons should always be one solid color.
  • System icons should either be black, white, or any other primary UI color.
  • System icons can be placed in colored circles.
  • Icon colors can be inverted with .fa-inverse.
    <span class="fa-layers fa-2x">
        <i class="fas fa-circle text-primary"></i>
        <i class="fas fa-bell fa-inverse" data-fa-transform="shrink-8 down-.25 right-.25"></i>

Icon sizing

  • Icons can vary in size, from extra small to 10x, by adding .fa-xs, .fa-sm, .fa-lg, .fa-2x, .fa-3x, .fa-5x, .fa-10x.
  • When scaling icons, ensure the sizes used appear sharp on standard and high DPI screens.
        <div class="text-muted">.fa-xs</div><i class="fas fa-chart-pie fa-lg"></i>


Power Transform rotating and flipping effects icon angle and reflection without changing or moving the container. To rotate or flip icons use any combination of rotate-#, flip-v, and flip-h with any arbitrary value.

    <div class="fa-4x">
      <i class="fas fa-magic" data-fa-transform="rotate-90"></i>
      <i class="fas fa-magic" data-fa-transform="rotate-180" ></i>
      <i class="fas fa-magic" data-fa-transform="rotate-270" ></i>
      <i class="fas fa-magic" data-fa-transform="rotate-30" ></i>
      <i class="fas fa-magic" data-fa-transform="rotate--30" ></i>
      <i class="fas fa-magic" data-fa-transform="flip-v"></i>
      <i class="fas fa-magic" data-fa-transform="flip-h"></i>
      <i class="fas fa-magic" data-fa-transform="flip-v flip-h"></i>


Use the .fa-spin class to get any icon to rotate, and use .fa-pulse to have it rotate with 8 steps.

  • Where possible, use icons for content loading animation
    <div class="fa-3x">
      <i class="fas fa-spinner fa-spin"></i>
      <i class="fas fa-circle-notch fa-spin"></i>
      <i class="fas fa-sync fa-spin"></i>
      <i class="fas fa-cog fa-spin"></i>
      <i class="fas fa-spinner fa-pulse"></i>