Overview

High quality and pixel perfect font icons available in 3 styles, duotone, outline and solid for Metronic elements.

Usage

Use KeenIcons with a spesific class as explained below. 
          <i class="ki-duotone ki-wrench fs-2x">
  <span class="path1"></span>
  <span class="path2"></span>
</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">
  <span class="path1"></span>
  <span class="path2"></span>
</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 fs-2x">
  <span class="path1"></span>
  <span class="path2"></span>
</i>
<i class="ki-solid ki-gear fs-2x"></i>

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

Inline icons can be colored using the .text-{color} class.
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 
          <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 size of font icons can be specified in the .fs-{size} class.
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
.fs-5x
.fs-4x
.fs-3x
.fs-2tx
.fs-2hx
.fs-2qx
.fs-2x
.fs-1
.fs-2
.fs-3
.fs-5
.fs-6 
          <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>

Listing

Three styles of icons.

Abstract

abstract-33
abstract-27
abstract-26
abstract-32
abstract-18
abstract-24
abstract-30
abstract-8
abstract-9
abstract-31
abstract-25
abstract-19
abstract-21
abstract-35
abstract-34
abstract-20
abstract-36
abstract-22
abstract-23
abstract-37
abstract-44
abstract
abstract-45
abstract-47
abstract-46
abstract-42
abstract-43
abstract-41
abstract-40
abstract-48
abstract-49
abstract-12
abstract-2
abstract-3
abstract-13
abstract-39
abstract-11
abstract-1
abstract-10
abstract-38
abstract-14
abstract-28
abstract-4
abstract-5
abstract-29
abstract-15
abstract-17
abstract-7
abstract-6
abstract-16

Settings

toggle-on
toggle-on-circle
toggle-off
category
setting
toggle-off-circle
more-2
setting-4
setting-2
setting-3

Design

eraser
paintbucket
add-item
design-2
brush
size
design
copy
text
design-frame
bucket
glass
feather
pencil
colors-square
design-mask
bucket-square
copy-success
color-swatch

Social Media

instagram
snapchat
classmates
facebook
whatsapp
social-media
youtube
dribbble
twitter
tiktok
behance

It Network

underlining
disconnect
code
gear
loading
scroll
wrench
square-brackets
frame
message-programming
data
fasten
click

Technologies

tech-wifi
joystick
faceid
technology-3
technology-2
electricity
fingerprint-scanning
technology-4
artificial-intelligence
technology

Ecommerce

basket-ok
cheque
handcart
shop
tag
purchase
discount
package
percentage
barcode
lots-shopping
basket

Archive

book-square
receipt-square
save-2
archive-tick

Security

shield-search
password-check
shield-tick
lock
key
shield
shield-cross
key-square
eye-slash
security-check
lock-3
scan-barcode
lock-2
eye
shield-slash
security-user

General

triangle
subtitle
ghost
information
milk
home
happy-emoji
mouse-square
filter-tick
filter-search
wifi-home
trash-square
paper-clip
archive
pin
wifi-square
auto-brightness
coffee
icon
emoji-happy
general-mouse
ranking
slider
crown-2
rescue
flash-circle
safe-home
cloud-change
crown
filter-edit
picture
verify
send
tag-cross
cloud-add
home-3
disk
trash
star
cd
home-2
mouse-circle
home-1
call
gift
share
sort
magnifier
filter-square
tree
filter
switch
cloud
cup
diamonds
status
rocket
cloud-download
menu
chrome

Location

geolocation-home
map
telephone-geolocation
satellite
flag
focus
pointers
compass
route
geolocation

Education

brifecase-timer
briefcase
clipboard
bookmark-2
note
note-2
book-open
book
teacher
award
brifecase-tick
brifecase-cros
bookmark

Business

chart-line
chart
graph-3
chart-pie-3
graph-2
chart-line-down
chart-pie-too
chart-pie-4
chart-line-down-2
graph-4
chart-line-up-2
badge
chart-line-up
chart-simple-3
chart-pie-simple
chart-simple-2
graph-up
chart-line-star
graph
chart-simple

Files Folders

tablet-delete
file-added
file-up
minus-folder
file
delete-files
add-folder
file-left
file-deleted
some-files
file-right
notepad
notepad-bookmark
document
like-folder
folder-up
folder-added
file-down
filter-tablet
tablet-book
update-file
add-notepad
questionnaire-tablet
tablet-up
tablet-ok
update-folder
files-tablet
folder-down
notepad-edit
tablet-text-up
search-list
tablet-text-down
add-files
tablet-down
delete-folder
folder
file-sheet

Software

bootstrap
figma
dropbox
xaomi
microsoft
android
vue
js
spring-framework
github
dj
google-play
angular
soft-3
python
soft-2
ts
xd
spotify
js-2
laravel
css
google
photoshop
twitch
illustrator
pails
react
html
slack
soft
yii
apple
vuesax

Time

calendar-add
calendar-search
calendar-2
calendar-tick
time
watch
calendar-edit
calendar
calendar-8
timer
calendar-remove

Support

heart-circle
like
information-4
information-5
information-2
information-3
question
dislike
message-question
medal-star
like-tag
like-2
support-24
question-2
lovely
like-shapes
heart

Users

user
user-square
user-tick
people
user-edit
profile-user
profile-circle

Medicine

capsule
virus
bandage
thermometer
flask
test-tubes
syringe
mask
pill
pulse

Burger Menu

burger-menu
burger-menu-6
burger-menu-5
burger-menu-4
burger-menu-1
burger-menu-3
burger-menu-2

Typography

text-align-center
text-italic
text-bold
text-strikethrough
text-underline
text-number
text-align-left
text-align-right
text-circle
text-align-justify-center

Finance

theta
dollar
binance
nexo
euro
avalanche
bitcoin
wallet
price-tag
finance-calculator
dash
lts
vibe
credit-cart
paypal
bill
ocean
celsius
educare
enjin-coin
two-credit-cart
bank
binance-usd
wanchain
trello
save-deposit
xmr
financial-schedule
office-bag

Weather

night-day
sun
drop
moon

Arrows

exit-right-corner
dots-circle-vertical
check-square
right-left
arrow-down
dots-horizontal
arrow-right-left
up-down
double-check
arrow-up-left
down
exit-up
up-square
down-square
plus-square
dots-circle
arrow-down-left
double-check-circle
up
entrance-right
arrow-right
arrow-two-diagonals
minus-square
arrow-diagonal
black-left
arrow-down-refraction
black-right
double-left
arrow-circle-left
arrow-zigzag
plus
check
exit-left
arrow-circle-right
cross-square
entrance-left
left-square
arrows-loop
black-left-line
double-left-arrow
check-circle
right
dots-square-vertical
arrow-up-right
exit-down
dots-square
to-left
double-down
plus-circle
black-down
double-up
black-up
double-right-arrow
arrow-up
black-right-line
arrow-up-refraction
arrow-left
cross
minus-circle
arrow-down-right
exit-right
to-right
double-right
arrow-mix
right-square
arrows-circle
cross-circle
left
minus
dots-vertical
arrow-up-down

Communication

message-text-2
message-notif
message-add
sms
directbox-default
message-text
messages
address-book
message-edit
message-minus

Notifications

notification-circle
notification-favorite
notification-2
notification
notification-bing
notification-status
notification-on

Delivery And Logistics

scooter-2
parcel
delivery-time
delivery
delivery-24
ship
courier
logistic
trailer
car-2
car-3
airplane-square
scooter
truck
cube-3
bus
cube-2
delivery-door
delivery-3
delivery-2
car
courier-express
airplane
delivery-geolocation
parcel-tracking

Devices

monitor-mobile
devices
keyboard
devices-2
bluetooth
wifi
airpod
simcard-2
speaker
printer
simcard
router
phone
electronic-clock
external-drive
laptop
tablet
screen
calculator
mouse

Grid

grid
slider-vertical-2
maximize
slider-vertical
row-horizontal
kanban
row-vertical
fat-rows
grid-2
element-8
element-9
element-12
element-4
element-5
grid-frame
element-11
element-7
element-6
element-10
element-2
element-3
element-equal
element-1
slider-horizontal-2
slider-horizontal
element-plus