Icons

Guidance and suggestions for using icon libraries with Bootstrap.

Font Awesome

Over 1,500 free icons

Docs UI Kit includes the world's most popular and easiest to use icon set - Font Awesome.

How to use

Place this code, which contains everything you need, within the <head> of each template or page that you want to use Font Awesome on.

                
                  <link rel="stylesheet" href="../assets/vendor/font-awesome/css/fontawesome-all.min.css">

You need to know two bits of information to reference an icon:

  • Its name, prefixed with fa-
  • The style you want to use's corresponding prefix.
                
                  <i class="fas fa-image"></i>

There are 4 styles: Solid, Regular, Light and Brands:

Style Availability Style Prefix Example Rendering
Solid Free fas <i class="fas fa-image"></i>
Regular Free far <i class="far fa-image"></i>
Light Pro Required fal <i class="fal fa-image"></i> N/A
Brands Free fab <i class="fab fa-font-awesome"></i>

Examples 

                      
                        <i class="fab fa-android text-primary"></i>
                        <i class="fas fa-car text-secondary"></i>
                        <i class="fas fa-chart-pie text-success"></i>
                        <i class="far fa-clock text-danger"></i>
                        <i class="fas fa-comment-alt text-info text-warning"></i>
                        <i class="fas fa-flag text-dark"></i>

Sizes

Need larger or smaller icons? Add .fa-xs, .fa-sm, .fa-lg, .fa-2x, .fa-3x, .fa-5x, .fa-7x or .fa-10x for additional sizes.

                      
                        <i class="fas fa-image fa-xs"></i>
                        <i class="fas fa-image fa-sm"></i>
                        <i class="fas fa-image"></i>
                        <i class="fas fa-image fa-lg"></i>
                        <i class="fas fa-image fa-2x"></i>
                        <i class="fas fa-image fa-3x"></i>
                        <i class="fas fa-image fa-5x"></i>
                        <i class="fas fa-image fa-7x"></i>
                        <i class="fas fa-image fa-10x"></i>

Feather

Over 279 free svg icons

Simply beautiful open source icons - Feather.

Examples 

                      
                        <svg class="duik-icon-svg-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>

                        <svg class="duik-icon-svg-secondary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>

                        <svg class="duik-icon-svg-success" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>

                        <svg class="duik-icon-svg-danger" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.89 1.45l8 4A2 2 0 0 1 22 7.24v9.53a2 2 0 0 1-1.11 1.79l-8 4a2 2 0 0 1-1.79 0l-8-4a2 2 0 0 1-1.1-1.8V7.24a2 2 0 0 1 1.11-1.79l8-4a2 2 0 0 1 1.78 0z"></path><polyline points="2.32 6.16 12 11 21.68 6.16"></polyline><line x1="12" y1="22.76" x2="12" y2="11"></line></svg>

                        <svg class="duik-icon-svg-warning" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>

                        <svg class="duik-icon-svg-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>

                        <svg class="duik-icon-svg-dark" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>

Sizes

Need larger or smaller icons? Add .duik-icon-svg-1x, .duik-icon-svg-2x, .duik-icon-svg-3x or .duik-icon-svg-4x for additional sizes.

                      
                        <svg class="duik-icon-svg-dark duik-icon-svg-1x mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>

                        <svg class="duik-icon-svg-dark duik-icon-svg-2x mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>

                        <svg class="duik-icon-svg-dark duik-icon-svg-3x mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>

                        <svg class="duik-icon-svg-dark duik-icon-svg-4x mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>