Overview
High quality and pixel perfect font icons available in 3 styles, duotone, outline and solid for Seven HTML 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:
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 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 size2- sets icon size that equals to<h2>font size3- sets icon size that equals to<h3>font size4- sets icon size that equals to<h4>font size5- sets icon size that equals to<h5>font size6- sets icon size that equals to<h6>font size7- sets icon size that equals to<h7>font size7- sets icon size that equals to0.95 of $font-size-basewhere$font-size-base: 1rem8- sets icon size that equals to0.85 of $font-size-basewhere$font-size-base: 1rem9- sets icon size that equals to0.75 of $font-size-basewhere$font-size-base: 1rem10- sets icon size that equals to0.5 of $font-size-basewhere$font-size-base: 1rembase- sets icon size that equals to$font-size-basewhere$font-size-base: 1remfluid- sets icon size that equals to100%2x- sets icon size that equals to2 of $font-size-basewhere$font-size-base: 1rem2qx- sets icon size that equals to2.25 of $font-size-basewhere$font-size-base: 1rem2hx- sets icon size that equals to2.5 of $font-size-basewhere$font-size-base: 1rem2tx- sets icon size that equals to2.75 of $font-size-basewhere$font-size-base: 1rem3x- sets icon size that equals to3 of $font-size-basewhere$font-size-base: 1rem3qx- sets icon size that equals to3.25 of $font-size-basewhere$font-size-base: 1rem3hx- sets icon size that equals to3.5 of $font-size-basewhere$font-size-base: 1rem3tx- sets icon size that equals to3.75 of $font-size-basewhere$font-size-base: 1rem4x- sets icon size that equals to4 of $font-size-basewhere$font-size-base: 1rem4qx- sets icon size that equals to4.25 of $font-size-basewhere$font-size-base: 1rem4hx- sets icon size that equals to4.5 of $font-size-basewhere$font-size-base: 1rem4tx- sets icon size that equals to4.75 of $font-size-basewhere$font-size-base: 1rem5x- sets icon size that equals to5 of $font-size-basewhere$font-size-base: 1rem5qx- sets icon size that equals to5.25 of $font-size-basewhere$font-size-base: 1rem5hx- sets icon size that equals to5.5 of $font-size-basewhere$font-size-base: 1rem5tx- sets icon size that equals to5.75 of $font-size-basewhere$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>KeenIcons
573 pixel perfect icons in 3 stylesAbstract
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
2024©
Keenthemes
