title: Icon Listings {{title}}

SVG Icon Overview

Inline Usage

Use svg icons as inline svg element in order to customize the icon size and color via CSS:
<!--begin::Svg Icon | path: icons/duotune/abstract/abs010.svg-->
<span class="svg-icon svg-icon-3x"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7V17H7V7H17ZM20 3H4C3.4 3 3 3.4 3 4V20C3 20.6 3.4 21 4 21H20C20.6 21 21 20.6 21 20V4C21 3.4 20.6 3 20 3Z" fill="currentColor"/>
</svg>
</span>
<!--end::Svg Icon-->

Colors

The inline icons can be colored using .svg-icon-{color} class that defined with $theme-text-colors variable in sass/_variables.scss:
white
primary
secondary
light
success
info
warning
danger
dark
muted
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
<span class="svg-icon svg-icon-2x svg-icon-white"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-primary"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-secondary"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-light"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-success"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-info"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-warning"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-danger"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-dark"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-muted"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-100"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-200"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-300"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-400"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-500"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-600"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-700"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-800"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-900"><svg>...</svg></span>

Sizes

The inline icons can be sized using .svg-icon-{size} class that defined with $font-sizes variable in sass/_variables.scss
Where size is one of:
  • 1 - sets icon size that equals to <h1> font size
  • 2 - sets icon size that equals to <h2> font size
  • 3 - sets icon size that equals to <h3> font size
  • 4 - sets icon size that equals to <h4> font size
  • 5 - sets icon size that equals to <h5> font size
  • 6 - sets icon size that equals to <h6> font size
  • 7 - sets icon size that equals to <h7> font size
  • 7 - sets icon size that equals to 0.95 of $font-size-base where $font-size-base: 1rem
  • 8 - sets icon size that equals to 0.85 of $font-size-base where $font-size-base: 1rem
  • 9 - sets icon size that equals to 0.75 of $font-size-base where $font-size-base: 1rem
  • 10 - sets icon size that equals to 0.5 of $font-size-base where $font-size-base: 1rem
  • base - sets icon size that equals to $font-size-base where $font-size-base: 1rem
  • fluid - sets icon size that equals to 100%
  • 2x - sets icon size that equals to 2 of $font-size-base where $font-size-base: 1rem
  • 2qx - sets icon size that equals to 2.25 of $font-size-base where $font-size-base: 1rem
  • 2hx - sets icon size that equals to 2.5 of $font-size-base where $font-size-base: 1rem
  • 2tx - sets icon size that equals to 2.75 of $font-size-base where $font-size-base: 1rem
  • 3x - sets icon size that equals to 3 of $font-size-base where $font-size-base: 1rem
  • 3qx - sets icon size that equals to 3.25 of $font-size-base where $font-size-base: 1rem
  • 3hx - sets icon size that equals to 3.5 of $font-size-base where $font-size-base: 1rem
  • 3tx - sets icon size that equals to 3.75 of $font-size-base where $font-size-base: 1rem
  • 4x - sets icon size that equals to 4 of $font-size-base where $font-size-base: 1rem
  • 4qx - sets icon size that equals to 4.25 of $font-size-base where $font-size-base: 1rem
  • 4hx - sets icon size that equals to 4.5 of $font-size-base where $font-size-base: 1rem
  • 4tx - sets icon size that equals to 4.75 of $font-size-base where $font-size-base: 1rem
  • 5x - sets icon size that equals to 5 of $font-size-base where $font-size-base: 1rem
  • 5qx - sets icon size that equals to 5.25 of $font-size-base where $font-size-base: 1rem
  • 5hx - sets icon size that equals to 5.5 of $font-size-base where $font-size-base: 1rem
  • 5tx - sets icon size that equals to 5.75 of $font-size-base where $font-size-base: 1rem
.icon-size-5x
.icon-size-4x
.icon-size-3x
.icon-size-2tx
.icon-size-2hx
.icon-size-2qx
.icon-size-2x
.icon-size-1
.icon-size-2
.icon-size-3
.icon-size-5
.icon-size-6
<span class="svg-icon svg-icon-5x"><svg>...</svg></span>
<span class="svg-icon svg-icon-4x"><svg>...</svg></span>
<span class="svg-icon svg-icon-3x"><svg>...</svg></span>
<span class="svg-icon svg-icon-2tx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2hx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2qx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x"><svg>...</svg></span>
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="svg-icon svg-icon-2"><svg>...</svg></span>
<span class="svg-icon svg-icon-3"><svg>...</svg></span>
<span class="svg-icon svg-icon-5"><svg>...</svg></span>
<span class="svg-icon svg-icon-6"><svg>...</svg></span>
Use Height & Width  classes .w-{size} .h-{size} to set an svg element's height and width explicitly:
.h-20px .w-20px
.h-30px .w-30px
.h-40px .w-40px
.h-50px .w-50px
.h-75px .w-75px
.h-100px .w-100px
<span class="svg-icon"><svg class="h-20px w-20px">...</svg></span>
<span class="svg-icon"><svg class="h-30px w-30px">...</svg></span>
<span class="svg-icon"><svg class="h-40px w-40px">...</svg></span>
<span class="svg-icon"><svg class="h-50px w-50px">...</svg></span>
<span class="svg-icon"><svg class="h-75px w-75px">...</svg></span>
<span class="svg-icon"><svg class="h-100px w-100px">...</svg></span>

Icons Listing

Ecommerce

Layouts

Communication

General

Technology

Art

Text

Abstract

Arrows

Files

Social

Graphs

Electronics

Medicine

Maps

Finance

Coding