Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

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 Metronic.


                        <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 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo