Overview
High quality and pixel perfect font icons available in 3 styles, duotone, outline and solid for Metronic elements.
Ugage
Use Keenicons with a spesific class as explained below:
<i class="ki-duotone ki-wrench fs-2x">
<i class="path1"></i>
<i class="path2"></i>
</i>
<i class="ki-outline ki-wrench fs-2x"></i>
<i class="ki-solid ki-wrench fs-2x"></i>
<i class="ki-outline ki-chart fs-2x"></i>
<i class="ki-duotone ki-chart fs-2x">
<i class="path1"></i>
<i class="path2"></i>
</i>
<i class="ki-solid ki-chart fs-2x"></i>
<i class="ki-outline ki-gear fs-2x"></i>
<i class="ki-duotone ki-gear">
<i class="path1"></i>
<i class="path2"></i>
</i>
<i class="ki-solid ki-gear fs-2x"></i>
Styles
Use Keenicons in 3 styles:
Duotone style
Solid style
Outline style
// Duotone style
<i class="ki-duotone ki-chart">
<i class="path1"></i>
<i class="path2"></i>
</i>
// Solid style
<i class="ki-solid ki-chart"></i>
// Outline style
<i class="ki-outline ki-chart"></i>
Colors
The inline icons can be colored using .text-{color}
class that defined with $theme-text-colors
variable in sass/_variables.scss
:
<i class="ki-outline ki-graph-up text-white"></i>
<i class="ki-outline ki-graph-up text-primary"></i>
<i class="ki-outline ki-graph-up text-secondary"></i>
<i class="ki-outline ki-graph-up text-light"></i>
<i class="ki-outline ki-graph-up text-success"></i>
<i class="ki-outline ki-graph-up text-info"></i>
<i class="ki-outline ki-graph-up text-warning"></i>
<i class="ki-outline ki-graph-up text-danger"></i>
<i class="ki-outline ki-graph-up text-dark"></i>
<i class="ki-outline ki-graph-up text-muted"></i>
<i class="ki-outline ki-graph-up text-gray-100"></i>
<i class="ki-outline ki-graph-up text-gray-200"></i>
<i class="ki-outline ki-graph-up text-gray-300"></i>
<i class="ki-outline ki-graph-up text-gray-400"></i>
<i class="ki-outline ki-graph-up text-gray-500"></i>
<i class="ki-outline ki-graph-up text-gray-600"></i>
<i class="ki-outline ki-graph-up text-gray-700"></i>
<i class="ki-outline ki-graph-up text-gray-800"></i>
<i class="ki-outline ki-graph-up text-gray-900"></i>
Sizes
The font icons can be sized using .fs-{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
<i class="ki-outline ki-calendar-add fs-5x"></i>
<i class="ki-outline ki-calendar-add fs-4x"></i>
<i class="ki-outline ki-calendar-add fs-3x"></i>
<i class="ki-outline ki-calendar-add fs-2tx"></i>
<i class="ki-outline ki-calendar-add fs-2hx"></i>
<i class="ki-outline ki-calendar-add fs-2qx"></i>
<i class="ki-outline ki-calendar-add fs-2x"></i>
<i class="ki-outline ki-calendar-add fs-1"></i>
<i class="ki-outline ki-calendar-add fs-2"></i>
<i class="ki-outline ki-calendar-add fs-3"></i>
<i class="ki-outline ki-calendar-add fs-5"></i>
<i class="ki-outline ki-calendar-add fs-6"></i>
Abstract
Settings
Design
Social Media
It Network
Technologies
Ecommerce
Archive
Security
General
Location
Education
Business
Files Folders
Software
Time
Support
Users
Medicine
Burger Menu
Typography
Finance
Weather
Arrows
Communication
Notifications
Delivery And Logistics
Devices
Grid