Overview
High quality and pixel perfect font icons available in 3 styles, duotone, outline and solid for Start Vue Pro 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
text-align-justify-center
Finance
Weather
Arrows
Communication
Notifications
Delivery And Logistics
Devices
Grid