Logo
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Media / Equalizer Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Keenthemes Custom Icon set provides a large set of web font icons with line, solid, bold styles.

Base Examples

Keenthemes Icons icons 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

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

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

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

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

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

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

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

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

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

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

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.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

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