Logo
Keenthemes Custom Icon set provides a large set of web font icons with line, solid, bold styles.

Base Examples

Keenthemes Iconsicons can be used as through class names as shown below.


                        <i class="ki ki-plus"></i>
                        <i class="ki ki-arrow-up"></i>
                        <i class="ki ki-round"></i>
                        <i class="ki ki-reload"></i>
                        <i class="ki ki-refresh"></i>
                        <i class="ki ki-solid-plus"></i>
                        

Color Options

Use .text-{light|secondary|success|info|primary|warning|danger|white|dark|dark-75|dark-50|dark-25}class format to set different colors.


                        <i class="ki ki-plus text-success"></i>
                        <i class="ki ki-arrow-up text-primary"></i>
                        <i class="ki ki-round text-danger"></i>
                        <i class="ki ki-reload text-warning"></i>
                        <i class="ki ki-refresh text-info"></i>
                        <i class="ki ki-solid-plus text-dark"></i>
                        

Sizes

Use .icon-{size}class format to set different sizes.


                        <i class="ki ki-solid-plus icon-xs"></i>
                        <i class="ki ki-solid-plus icon-sm"></i>
                        <i class="ki ki-solid-plus icon-nm"></i>
                        <i class="ki ki-solid-plus icon-md"></i>
                        <i class="ki ki-solid-plus icon-lg"></i>
                        <i class="ki ki-solid-plus icon-xl"></i>
                        <i class="ki ki-solid-plus icon-2x"></i>
                        <i class="ki ki-solid-plus icon-3x"></i>
                        <i class="ki ki-solid-plus icon-4x"></i>
                        <i class="ki ki-solid-plus icon-5x"></i>
                        <i class="ki ki-solid-plus icon-6x"></i>
                        <i class="ki ki-solid-plus icon-7x"></i>
                        <i class="ki ki-solid-plus icon-8x"></i>
                        <i class="ki ki-solid-plus icon-9x"></i>
                        <i class="ki ki-solid-plus icon-10x"></i>
                        

Integration

You can use KeenthemesIcons literally with any element within Keen.


                        <a href="#" class="btn btn-success font-weight-bold mr-2">
                            <i class="ki ki-plus icon-sm"></i> Button example
                        </a>

                        <a href="#" class="btn btn-light-danger font-weight-bold mr-2">
                            <i class="ki ki-bold-close icon-sm"></i> Button example 2
                        </a>

                        <div class="dropdown dropdown-inline">
                            <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="ki ki-outline-info icon-md"></i> Dropdown example
                            </a>
                            <div class="dropdown-menu dropdown-menu-md py-5">
                                <ul class="navi navi-hover">
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="ki ki-gear text-danger"></i></span>
                                            <span class="navi-text">Messages</span>
                                            <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="ki ki-info text-warning"></i></span>
                                            <span class="navi-text">Settings</span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="ki ki-wrench text-success"></i></span>
                                            <span class="navi-text">Tasks</span>
                                            <span class="navi-label">
                                                <span class="label label-warning label-rounded">5</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="flaticon2-file  text-primary"></i></span>
                                            <span class="navi-text">Orders</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        

Flaticon Icons

ki-double-arrow-next
ki-double-arrow-back
ki-double-arrow-down
ki-double-arrow-up
ki-long-arrow-back
ki-arrow-next
ki-arrow-back
ki-long-arrow-next
ki-check
ki-arrow-down
ki-minus
ki-long-arrow-down
ki-long-arrow-up
ki-plus
ki-arrow-up
ki-round
ki-reload
ki-refresh
ki-solid-plus
ki-bold-close
ki-solid-minus
ki-hide
ki-code
ki-copy
ki-up-and-down
ki-left-and-right
ki-bold-triangle-bottom
ki-bold-triangle-right
ki-bold-triangle-top
ki-bold-triangle-left
ki-bold-double-arrow-up
ki-bold-double-arrow-next
ki-bold-double-arrow-back
ki-bold-double-arrow-down
ki-bold-arrow-down
ki-bold-arrow-next
ki-bold-arrow-back
ki-bold-arrow-up
ki-bold-check
ki-bold-wide-arrow-down
ki-bold-wide-arrow-up
ki-bold-wide-arrow-next
ki-bold-wide-arrow-back
ki-bold-long-arrow-up
ki-bold-long-arrow-down
ki-bold-long-arrow-back
ki-bold-long-arrow-next
ki-bold-check-1
ki-close
ki-more-ver
ki-bold-more-ver
ki-more-hor
ki-bold-more-hor
ki-bold-menu
ki-drag
ki-bold-sort
ki-eye
ki-outline-info
ki-menu
ki-menu-grid
ki-wrench
ki-gear
ki-info
ki-calendar-2
ki-calendar
ki-calendar-today
ki-clock
ki-dots

User Profile 15 messages

Recent Notifications

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9