---
title: Icons
description: "Check out the full list of the web font icons for the Kendo UI for Vue  Wrappers."
slug: icons
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/styling/icons"
position: 3
---

<WrapperBanner link="/kendo-vue-ui/components/styling/icons"></WrapperBanner>

# Icons

The Kendo UI for Vue suite delivers more than 400 integrated font icons for its components.

## What Are Icon Fonts

Icon fonts are fonts which contain vector glyphs instead of letters and numbers. You can style them with CSS by using all styling properties that can be applied to a regular text in a modern browser.

## Why Use Icon Fonts

The usage of icon fonts in a user interface (UI) naturally succeeds the outdated [icon sprite technique](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS).

Font icons demonstrate significant benefits such as:

* [Improved scalability](#toc-sizes)&mdash;While icon sprites are bitmap raster images and do not scale well, icon fonts use vector graphics, look perfect on retina displays, and make scaling as easy as setting the `font-size` configuration option.
* [Improved design capabilities](#toc-visual-adjustments)&mdash;You can effortlessly apply CSS effects on the fly by setting the [text color](#toc-colors), shadow, or other options for different interaction states. For example, on `:hover`.
* Improved browser support&mdash;Font icons are browser-agnostic and are supported by all modern browsers.
* Reduced number of HTTP requests&mdash;To load an icon font, you need a maximum of a few HTTP requests.
* Reduced file size&mdash;A 100KB file contains approximately 500 vector icons.

## Basic Usage

To use the Kendo UI font icons:

1. [Load](slug:themesandstyles) a Kendo UI theme into your project.
2. Assign a `k-icon` CSS class followed by a predefined class from the [list of font icons](#toc-list-of-font-icons) to an HTML tag. For example, the `<span>` element as demonstrated in the following example.

    ```html
    <span class="k-icon k-i-calendar"></span>
    ```

## Rendering with Unicode Numbers

Though the web icon font comes with a [set of predefined CSS classes](#toc-list-of-font-icons), you might need to use the icons with a custom CSS class name. To achieve this, set a `:before` pseudo content value for the relevant icon.

```html
<span class="k-icon my-custom-icon-class"></span>

<style>
    .my-custom-icon-class:before {
        content: "\e13a"; /* Adds a glyph using the Unicode character number */
    }
</style>
```

## Visual Adjustments

Icon fonts support the following options for visual enhancement:

* Application of [different sizes](#toc-sizes).
* Application of [icon colors](#toc-colors).
* [Flipping and rotating](#toc-flipping-and-rotating) of icons.

### Sizes

The default size of all Kendo UI icons is 16 px (Font-size: 16 px; Width: 16 px; Height: 16 px). However, Kendo UI provides the following predefined sizes for icons:

* `xsmall`&mdash;Font-size: 12 px; Width: 12 px; Height: 12 px.
* `small`&mdash;Font-size: 14 px; Width: 14 px; Height: 14 px.
* `medium`&mdash;Font-size: 16 px; Width: 16 px; Height: 16 px.
* `large`&mdash;Font-size: 20 px; Width: 20 px; Height: 20 px.
* `xlarge`&mdash;Font-size: 24 px; Width: 24 px; Height: 24 px.
* `xxlarge`&mdash;Font-size: 32 px; Width: 32 px; Height: 32 px.
* `xxxlarge`&mdash;Font-size: 48 px; Width: 48 px; Height: 48 px.

You can set each of them by using the respective class:

* `k-icon-xs`
* `k-icon-sm`
* `k-icon-md`
* `k-icon-lg`
* `k-icon-xl`
* `k-icon-xxl`
* `k-icon-xxxl`

```html
<span class="k-icon k-i-gear k-icon-xs"></span>
<span class="k-icon k-i-gear k-icon-md"></span>
<span class="k-icon k-i-gear k-icon-xl"></span>
```

For font icons, you can apply any custom size by using the CSS `font-size` property.

```html
<span class="k-icon k-i-gear k-icon-24"></span>

<style>
    .k-icon-24 {
        font-size: 24px; /* Sets icon size to 24 px */
    }
</style>
```

For SVG icons, you can change the size with the `width` and `height` CSS properties.

```html
<span class="k-svg-icon k-svg-i-gear k-icon-24"></span>

<style>
    .k-icon-24 {
        width: 24px;
        height: 24px;
    }
</style>
```

### Colors

To set the icon color, use the `color` CSS property.

```html
<span class="k-icon k-i-gear" style="color: blue;"></span>
<span class="k-icon k-i-gear colored-icon"></span>

<style>
    .colored-icon {
        color: green;
    }
</style>
```

### Colors

To set the icon color, use the `color` CSS property.

```html
<span class="k-icon k-i-gear" style="color: blue;"></span>
<span class="k-icon k-i-gear colored-icon"></span>

<style>
    .colored-icon {
        color: green;
    }
</style>
```

### Flipping and Rotating

To better accommodate an icon in your application, flip it by using the `k-flip-h` and `k-flip-v` predefined CSS classes.

```html
<span class="k-icon k-i-pencil"></span>
<span class="k-icon k-i-pencil k-flip-h"></span>
<span class="k-icon k-i-pencil k-flip-v"></span>
<span class="k-icon k-i-pencil k-flip-h k-flip-v"></span>
```

You can also rotate the icon with the help of the following predefined CSS classes:

* `k-rotate-0`&mdash;Rotates an icon 0°.
* `k-rotate-45`&mdash;Rotates an icon 45°.
* `k-rotate-90`&mdash;Rotates an icon 90°.
* `k-rotate-135`&mdash;Rotates an icon 135°.
* `k-rotate-180`&mdash;Rotates an icon 180°.
* `k-rotate-225`&mdash;Rotates an icon 225°.
* `k-rotate-270`&mdash;Rotates an icon 270°.
* `k-rotate-315`&mdash;Rotates an icon 315°.

```html
<span class="k-icon k-i-pencil k-rotate-90"></span>
```

## Loading Indicator

To show a loading indicator, use the `k-i-loading` CSS class. You can adjust the size and color of the loading indicator in the same way you make adjustments to other icons.

```html
<span class="k-icon k-i-loading"></span>
<span class="k-icon k-i-loading" style="font-size: 64px;"></span>
<span class="k-icon k-i-loading" style="color: limegreen;"></span>
```

## List of Font Icons

* [Actions](#toc-actions)
* [Alerts and Notifications](#toc-alerts-and-notifications)
* [Editing](#toc-editing)
* [Files and Folders](#toc-files-and-folders)
* [Images](#toc-images)
* [Layout and Navigation](#toc-layout-and-navigation)
* [Mapping](#toc-mapping)
* [Media](#toc-media)
* [Social Sharing](#toc-social-sharing)
* [Toggle](#toc-toggle)

### Actions

<style>

    .WebComponentsIcons {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .WebComponentsIcons::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        line-height: 0;
    }

     .WebComponentsIcons li {
        margin: 10px;
        padding: 10px;
        display: block;
        float: left;
        vertical-align: top;
        text-align: center;
        width: 160px;
        height: 92px;
        font-size: 12px;
        line-height: 1em;
        font-weight: 300;
        color: #999;
    }

    .WebComponentsIcons li:before {
        display: none;
    }

    .WebComponentsIcons .k-icon {
        display: block;
        clear: both;
        margin: 0 auto 10px;
        color: #656565;
        font-size: 32px;
    }

    .obsolete-classes {
        width: 100%;
        max-width: 900px;
        text-align: left;
        border-collapse: collapse;
    }

    .obsolete-classes th,
    .obsolete-classes td {
        padding: 10px 0;
        border-bottom: 1px solid #ececec;
    }

    .obsolete-classes th {
        padding: 0 0 5px;
    }

    .old-class {
        color: #f31700;
    }

    .new-class {
        color: #5ec232;
    }

    .ref-icon {
        width: 60px;
    }

</style>

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-undo"></span> .k-i-undo</li>
    <li><span class="k-icon k-i-redo"></span> .k-i-redo</li>
    <li><span class="k-icon k-i-reset"></span> .k-i-reset</li>
    <li><span class="k-icon k-i-reload"></span> .k-i-reload<br /> .k-i-refresh</li>
    <li><span class="k-icon k-i-non-recurrence"></span> .k-i-non-recurrence</li>
    <li><span class="k-icon k-i-reset-sm"></span> .k-i-reset-sm</li>
    <li><span class="k-icon k-i-reload-sm"></span> .k-i-reload-sm<br /> .k-i-refresh-sm</li>
    <li><span class="k-icon k-i-clock"></span> .k-i-clock</li>
    <li><span class="k-icon k-i-calendar"></span> .k-i-calendar</li>
    <li><span class="k-icon k-i-save"></span> .k-i-save<br /> .k-i-floppy</li>
    <li><span class="k-icon k-i-print"></span> .k-i-print<br /> .k-i-printer</li>
    <li><span class="k-icon k-i-edit"></span> .k-i-edit<br /> .k-i-pencil</li>
    <li><span class="k-icon k-i-delete"></span> .k-i-delete<br /> .k-i-trash</li>
    <li><span class="k-icon k-i-attachment"></span> .k-i-attachment<br /> .k-i-clip</li>
    <li><span class="k-icon k-i-attachment-45"></span> .k-i-attachment-45<br /> .k-i-clip-45</li>
    <li><span class="k-icon k-i-link-horizontal"></span> .k-i-link-horizontal<br /> .k-i-hyperlink</li>
    <li><span class="k-icon k-i-unlink-horizontal"></span> .k-i-unlink-horizontal<br /> .k-i-hyperlink-remove</li>
    <li><span class="k-icon k-i-link-vertical"></span> .k-i-link-vertical</li>
    <li><span class="k-icon k-i-unlink-vertical"></span> .k-i-unlink-vertical</li>
    <li><span class="k-icon k-i-lock"></span> .k-i-lock</li>
    <li><span class="k-icon k-i-unlock"></span> .k-i-unlock</li>
    <li><span class="k-icon k-i-cancel"></span> .k-i-cancel</li>
    <li><span class="k-icon k-i-cancel-outline"></span> .k-i-cancel-outline</li>
    <li><span class="k-icon k-i-cancel-circle"></span> .k-i-cancel-circle</li>
    <li><span class="k-icon k-i-check"></span> .k-i-check<br /> .k-i-checkmark</li>
    <li><span class="k-icon k-i-check-outline"></span> .k-i-check-outline<br /> .k-i-checkmark-outline</li>
    <li><span class="k-icon k-i-check-circle"></span> .k-i-check-circle<br /> .k-i-checkmark-circle</li>
    <li><span class="k-icon k-i-close"></span> .k-i-close<br /> .k-i-x</li>
    <li><span class="k-icon k-i-close-outline"></span> .k-i-close-outline<br /> .k-i-x-outline</li>
    <li><span class="k-icon k-i-close-circle"></span> .k-i-close-circle<br /> .k-i-x-circle</li>
    <li><span class="k-icon k-i-plus"></span> .k-i-plus</li>
    <li><span class="k-icon k-i-plus-outline"></span> .k-i-plus-outline</li>
    <li><span class="k-icon k-i-plus-circle"></span> .k-i-plus-circle</li>
    <li><span class="k-icon k-i-minus"></span> .k-i-minus</li>
    <li><span class="k-icon k-i-minus-outline"></span> .k-i-minus-outline</li>
    <li><span class="k-icon k-i-minus-circle"></span> .k-i-minus-circle</li>
    <li><span class="k-icon k-i-sort-asc"></span> .k-i-sort-asc</li>
    <li><span class="k-icon k-i-sort-desc"></span> .k-i-sort-desc</li>
    <li><span class="k-icon k-i-unsort"></span> .k-i-unsort</li>
    <li><span class="k-icon k-i-sort-clear"></span> .k-i-sort-clear</li>
    <li><span class="k-icon k-i-sort-asc-sm"></span> .k-i-sort-asc-sm</li>
    <li><span class="k-icon k-i-sort-desc-sm"></span> .k-i-sort-desc-sm</li>
    <li><span class="k-icon k-i-filter"></span> .k-i-filter</li>
    <li><span class="k-icon k-i-filter-clear"></span> .k-i-filter-clear</li>
    <li><span class="k-icon k-i-filter-sm"></span> .k-i-filter-sm</li>
    <li><span class="k-icon k-i-filter-sort-asc-sm"></span> .k-i-filter-sort-asc-sm</li>
    <li><span class="k-icon k-i-filter-sort-desc-sm"></span> .k-i-filter-sort-desc-sm</li>
    <li><span class="k-icon k-i-filter-add-expression"></span> .k-i-filter-add-expression</li>
    <li><span class="k-icon k-i-filter-add-group"></span> .k-i-filter-add-group</li>
    <li><span class="k-icon k-i-login"></span> .k-i-login</li>
    <li><span class="k-icon k-i-logout"></span> .k-i-logout</li>
    <li><span class="k-icon k-i-download"></span> .k-i-download</li>
    <li><span class="k-icon k-i-upload"></span> .k-i-upload</li>
    <li><span class="k-icon k-i-hyperlink-open"></span> .k-i-hyperlink-open</li>
    <li><span class="k-icon k-i-hyperlink-open-sm"></span> .k-i-hyperlink-open-sm</li>
    <li><span class="k-icon k-i-launch"></span> .k-i-launch</li>
    <li><span class="k-icon k-i-window"></span> .k-i-window<br /> .k-i-window-maximize</li>
    <li><span class="k-icon k-i-windows"></span> .k-i-windows<br /> .k-i-window-restore<br /> .k-i-tiles</li>
    <li><span class="k-icon k-i-window-minimize"></span> .k-i-window-minimize</li>
    <li><span class="k-icon k-i-gear"></span> .k-i-gear<br /> .k-i-cog<br /> .k-i-custom</li>
    <li><span class="k-icon k-i-gears"></span> .k-i-gears<br /> .k-i-cogs</li>
    <li><span class="k-icon k-i-wrench"></span> .k-i-wrench<br /> .k-i-settings</li>
    <li><span class="k-icon k-i-preview"></span> .k-i-preview<br /> .k-i-eye</li>
    <li><span class="k-icon k-i-zoom"></span> .k-i-zoom<br /> .k-i-search</li>
    <li><span class="k-icon k-i-zoom-in"></span> .k-i-zoom-in</li>
    <li><span class="k-icon k-i-zoom-out"></span> .k-i-zoom-out</li>
    <li><span class="k-icon k-i-pan"></span> .k-i-pan<br /> .k-i-move</li>
    <li><span class="k-icon k-i-calculator"></span> .k-i-calculator</li>
    <li><span class="k-icon k-i-cart"></span> .k-i-cart<br /> .k-i-shopping-cart</li>
    <li><span class="k-icon k-i-connector"></span> .k-i-connector</li>
    <li><span class="k-icon k-i-plus-sm"></span> .k-i-plus-sm</li>
    <li><span class="k-icon k-i-minus-sm"></span> .k-i-minus-sm</li>
</ul>

### Alerts and Notifications

<ul class="WebComponentsIcons">
   <li><span class="k-icon k-i-notification"></span> .k-i-notification<br /> .k-i-bell</li>
   <li><span class="k-icon k-i-information"></span> .k-i-information<br /> .k-i-info</li>
   <li><span class="k-icon k-i-question"></span> .k-i-question<br /> .k-i-help</li>
   <li><span class="k-icon k-i-warning"></span> .k-i-warning<br /> .k-i-exception<br /> .k-i-error</li>
</ul>

### Editing

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-page-properties"></span> .k-i-page-properties</li>
    <li><span class="k-icon k-i-bold"></span> .k-i-bold</li>
    <li><span class="k-icon k-i-italic"></span> .k-i-italic</li>
    <li><span class="k-icon k-i-underline"></span> .k-i-underline</li>
    <li><span class="k-icon k-i-font-family"></span> .k-i-font-family</li>
    <li><span class="k-icon k-i-foreground-color"></span> .k-i-foreground-color</li>
    <li><span class="k-icon k-i-convert-lowercase"></span> .k-i-convert-lowercase</li>
    <li><span class="k-icon k-i-convert-uppercase"></span> .k-i-convert-uppercase</li>
    <li><span class="k-icon k-i-strikethrough"></span> .k-i-strikethrough</li>
    <li><span class="k-icon k-i-sub-script"></span> .k-i-sub-script</li>
    <li><span class="k-icon k-i-sup-script"></span> .k-i-sup-script</li>
    <li><span class="k-icon k-i-div"></span> .k-i-div</li>
    <li><span class="k-icon k-i-all"></span> .k-i-all</li>
    <li><span class="k-icon k-i-h1"></span> .k-i-h1</li>
    <li><span class="k-icon k-i-h2"></span> .k-i-h2</li>
    <li><span class="k-icon k-i-h3"></span> .k-i-h3</li>
    <li><span class="k-icon k-i-h4"></span> .k-i-h4</li>
    <li><span class="k-icon k-i-h5"></span> .k-i-h5</li>
    <li><span class="k-icon k-i-h6"></span> .k-i-h6</li>
    <li><span class="k-icon k-i-list-ordered"></span> .k-i-list-ordered<br /> .k-i-list-numbered</li>
    <li><span class="k-icon k-i-list-unordered"></span> .k-i-list-unordered<br /> .k-i-list-bulleted</li>
    <li><span class="k-icon k-i-indent-increase"></span> .k-i-indent-increase<br /> .k-i-indent</li>
    <li><span class="k-icon k-i-indent-decrease"></span> .k-i-indent-decrease<br /> .k-i-outdent</li>
    <li><span class="k-icon k-i-insert-up"></span> .k-i-insert-up<br /> .k-i-insert-top</li>
    <li><span class="k-icon k-i-insert-middle"></span> .k-i-insert-middle</li>
    <li><span class="k-icon k-i-insert-down"></span> .k-i-insert-down<br /> .k-i-insert-bottom</li>
    <li><span class="k-icon k-i-align-top"></span> .k-i-align-top</li>
    <li><span class="k-icon k-i-align-middle"></span> .k-i-align-middle</li>
    <li><span class="k-icon k-i-align-bottom"></span> .k-i-align-bottom</li>
    <li><span class="k-icon k-i-align-left"></span> .k-i-align-left</li>
    <li><span class="k-icon k-i-align-center"></span> .k-i-align-center</li>
    <li><span class="k-icon k-i-align-right"></span> .k-i-align-right</li>
    <li><span class="k-icon k-i-align-justify"></span> .k-i-align-justify</li>
    <li><span class="k-icon k-i-align-remove"></span> .k-i-align-remove</li>
    <li><span class="k-icon k-i-text-wrap"></span> .k-i-text-wrap</li>
    <li><span class="k-icon k-i-rule-horizontal"></span> .k-i-rule-horizontal</li>
    <li><span class="k-icon k-i-table-align-top-left"></span> .k-i-table-align-top-left</li>
    <li><span class="k-icon k-i-table-align-top-center"></span> .k-i-table-align-top-center</li>
    <li><span class="k-icon k-i-table-align-top-right"></span> .k-i-table-align-top-right</li>
    <li><span class="k-icon k-i-table-align-middle-left"></span> .k-i-table-align-middle-left</li>
    <li><span class="k-icon k-i-table-align-middle-center"></span> .k-i-table-align-middle-center</li>
    <li><span class="k-icon k-i-table-align-middle-right"></span> .k-i-table-align-middle-right</li>
    <li><span class="k-icon k-i-table-align-bottom-left"></span> .k-i-table-align-bottom-left</li>
    <li><span class="k-icon k-i-table-align-bottom-center"></span> .k-i-table-align-bottom-center</li>
    <li><span class="k-icon k-i-table-align-bottom-right"></span> .k-i-table-align-bottom-right</li>
    <li><span class="k-icon k-i-table-align-remove"></span> .k-i-table-align-remove</li>
    <li><span class="k-icon k-i-borders-all"></span> .k-i-borders-all</li>
    <li><span class="k-icon k-i-borders-outside"></span> .k-i-borders-outside</li>
    <li><span class="k-icon k-i-borders-inside"></span> .k-i-borders-inside</li>
    <li><span class="k-icon k-i-borders-inside-horizontal"></span> .k-i-borders-inside-horizontal</li>
    <li><span class="k-icon k-i-borders-inside-vertical"></span> .k-i-borders-inside-vertical</li>
    <li><span class="k-icon k-i-border-top"></span> .k-i-border-top</li>
    <li><span class="k-icon k-i-border-bottom"></span> .k-i-border-bottom</li>
    <li><span class="k-icon k-i-border-left"></span> .k-i-border-left</li>
    <li><span class="k-icon k-i-border-right"></span> .k-i-border-right</li>
    <li><span class="k-icon k-i-border-no"></span> .k-i-border-no</li>
    <li><span class="k-icon k-i-borders-show-hide"></span> .k-i-borders-show-hide</li>
    <li><span class="k-icon k-i-form"></span> .k-i-form<br /> .k-i-border</li>
    <li><span class="k-icon k-i-form-element"></span> .k-i-form-element</li>
    <li><span class="k-icon k-i-code-snippet"></span> .k-i-code-snippet</li>
    <li><span class="k-icon k-i-select-all"></span> .k-i-select-all</li>
    <li><span class="k-icon k-i-button"></span> .k-i-button</li>
    <li><span class="k-icon k-i-select-box"></span> .k-i-select-box</li>
    <li><span class="k-icon k-i-calendar-date"></span> .k-i-calendar-date</li>
    <li><span class="k-icon k-i-group-box"></span> .k-i-group-box</li>
    <li><span class="k-icon k-i-textarea"></span> .k-i-textarea</li>
    <li><span class="k-icon k-i-textbox"></span> .k-i-textbox</li>
    <li><span class="k-icon k-i-textbox-hidden"></span> .k-i-textbox-hidden</li>
    <li><span class="k-icon k-i-password"></span> .k-i-password</li>
    <li><span class="k-icon k-i-paragraph-add"></span> .k-i-paragraph-add</li>
    <li><span class="k-icon k-i-edit-tools"></span> .k-i-edit-tools</li>
    <li><span class="k-icon k-i-template-manager"></span> .k-i-template-manager</li>
    <li><span class="k-icon k-i-change-manually"></span> .k-i-change-manually</li>
    <li><span class="k-icon k-i-track-changes"></span> .k-i-track-changes</li>
    <li><span class="k-icon k-i-track-changes-enable"></span> .k-i-track-changes-enable</li>
    <li><span class="k-icon k-i-track-changes-accept"></span> .k-i-track-changes-accept</li>
    <li><span class="k-icon k-i-track-changes-accept-all"></span> .k-i-track-changes-accept-all</li>
    <li><span class="k-icon k-i-track-changes-reject"></span> .k-i-track-changes-reject</li>
    <li><span class="k-icon k-i-track-changes-reject-all"></span> .k-i-track-changes-reject-all</li>
    <li><span class="k-icon k-i-document-manager"></span> .k-i-document-manager</li>
    <li><span class="k-icon k-i-custom-icon"></span> .k-i-custom-icon</li>
    <li><span class="k-icon k-i-dictionary-add"></span> .k-i-dictionary-add</li>
    <li><span class="k-icon k-i-image-light-dialog"></span> .k-i-image-light-dialog<br /> .k-i-image-insert</li>
    <li><span class="k-icon k-i-image-edit"></span> .k-i-image-edit</li>
    <li><span class="k-icon k-i-image-map-editor"></span> .k-i-image-map-editor</li>
    <li><span class="k-icon k-i-comment"></span> .k-i-comment</li>
    <li><span class="k-icon k-i-comment-remove"></span> .k-i-comment-remove</li>
    <li><span class="k-icon k-i-comments-remove-all"></span> .k-i-comments-remove-all</li>
    <li><span class="k-icon k-i-silverlight"></span> .k-i-silverlight</li>
    <li><span class="k-icon k-i-media-manager"></span> .k-i-media-manager</li>
    <li><span class="k-icon k-i-video-external"></span> .k-i-video-external</li>
    <li><span class="k-icon k-i-flash-manager"></span> .k-i-flash-manager</li>
    <li><span class="k-icon k-i-find-and-replace"></span> .k-i-find-and-replace<br /> .k-i-find</li>
    <li><span class="k-icon k-i-copy"></span> .k-i-copy<br /> .k-i-files</li>
    <li><span class="k-icon k-i-cut"></span> .k-i-cut</li>
    <li><span class="k-icon k-i-paste"></span> .k-i-paste</li>
    <li><span class="k-icon k-i-paste-as-html"></span> .k-i-paste-as-html</li>
    <li><span class="k-icon k-i-paste-from-word"></span> .k-i-paste-from-word</li>
    <li><span class="k-icon k-i-paste-from-word-strip-file"></span> .k-i-paste-from-word-strip-file</li>
    <li><span class="k-icon k-i-paste-html"></span> .k-i-paste-html</li>
    <li><span class="k-icon k-i-paste-markdown"></span> .k-i-paste-markdown</li>
    <li><span class="k-icon k-i-paste-plain-text"></span> .k-i-paste-plain-text</li>
    <li><span class="k-icon k-i-apply-format"></span> .k-i-apply-format</li>
    <li><span class="k-icon k-i-clear-css"></span> .k-i-clear-css</li>
    <li><span class="k-icon k-i-copy-format"></span> .k-i-copy-format</li>
    <li><span class="k-icon k-i-strip-all-formating"></span> .k-i-strip-all-formating</li>
    <li><span class="k-icon k-i-strip-css-format"></span> .k-i-strip-css-format</li>
    <li><span class="k-icon k-i-strip-font-elements"></span> .k-i-strip-font-elements</li>
    <li><span class="k-icon k-i-strip-span-elements"></span> .k-i-strip-span-elements</li>
    <li><span class="k-icon k-i-strip-word-formatting"></span> .k-i-strip-word-formatting</li>
    <li><span class="k-icon k-i-format-code-block"></span> .k-i-format-code-block</li>
    <li><span class="k-icon k-i-style-builder"></span> .k-i-style-builder</li>
    <li><span class="k-icon k-i-module-manager"></span> .k-i-module-manager</li>
    <li><span class="k-icon k-i-hyperlink-light-dialog"></span> .k-i-hyperlink-light-dialog<br /> .k-i-hyperlink-insert</li>
    <li><span class="k-icon k-i-hyperlink-globe"></span> .k-i-hyperlink-globe</li>
    <li><span class="k-icon k-i-hyperlink-globe-remove"></span> .k-i-hyperlink-globe-remove</li>
    <li><span class="k-icon k-i-hyperlink-email"></span> .k-i-hyperlink-email</li>
    <li><span class="k-icon k-i-anchor"></span> .k-i-anchor</li>
    <li><span class="k-icon k-i-table-light-dialog"></span> .k-i-table-light-dialog<br /> .k-i-table-insert</li>
    <li><span class="k-icon k-i-table"></span> .k-i-table<br /> .k-i-table-unmerge</li>
    <li><span class="k-icon k-i-table-properties"></span> .k-i-table-properties</li>
    <li><span class="k-icon k-i-table-cell"></span> .k-i-table-cell</li>
    <li><span class="k-icon k-i-table-cell-properties"></span> .k-i-table-cell-properties</li>
    <li><span class="k-icon k-i-table-column-insert-left"></span> .k-i-table-column-insert-left</li>
    <li><span class="k-icon k-i-table-column-insert-right"></span> .k-i-table-column-insert-right</li>
    <li><span class="k-icon k-i-table-row-insert-above"></span> .k-i-table-row-insert-above</li>
    <li><span class="k-icon k-i-table-row-insert-below"></span> .k-i-table-row-insert-below</li>
    <li><span class="k-icon k-i-table-column-delete"></span> .k-i-table-column-delete</li>
    <li><span class="k-icon k-i-table-row-delete"></span> .k-i-table-row-delete</li>
    <li><span class="k-icon k-i-table-cell-delete"></span> .k-i-table-cell-delete</li>
    <li><span class="k-icon k-i-table-delete"></span> .k-i-table-delete</li>
    <li><span class="k-icon k-i-cells-merge"></span> .k-i-cells-merge</li>
    <li><span class="k-icon k-i-cells-merge-horizontally"></span> .k-i-cells-merge-horizontally</li>
    <li><span class="k-icon k-i-cells-merge-vertically"></span> .k-i-cells-merge-vertically</li>
    <li><span class="k-icon k-i-cell-split-horizontally"></span> .k-i-cell-split-horizontally</li>
    <li><span class="k-icon k-i-cell-split-vertically"></span> .k-i-cell-split-vertically</li>
    <li><span class="k-icon k-i-pane-freeze"></span> .k-i-pane-freeze</li>
    <li><span class="k-icon k-i-row-freeze"></span> .k-i-row-freeze</li>
    <li><span class="k-icon k-i-column-freeze"></span> .k-i-column-freeze</li>
    <li><span class="k-icon k-i-toolbar-float"></span> .k-i-toolbar-float</li>
    <li><span class="k-icon k-i-spell-checker"></span> .k-i-spell-checker</li>
    <li><span class="k-icon k-i-validation-xhtml"></span> .k-i-validation-xhtml</li>
    <li><span class="k-icon k-i-validation-data"></span> .k-i-validation-data</li>
    <li><span class="k-icon k-i-toggle-full-screen-mode"></span> .k-i-toggle-full-screen-mode</li>
    <li><span class="k-icon k-i-formula-fx"></span> .k-i-formula-fx</li>
    <li><span class="k-icon k-i-sum"></span> .k-i-sum</li>
    <li><span class="k-icon k-i-symbol"></span> .k-i-symbol</li>
    <li><span class="k-icon k-i-dollar"></span> .k-i-dollar<br /> .k-i-currency</li>
    <li><span class="k-icon k-i-percent"></span> .k-i-percent</li>
    <li><span class="k-icon k-i-custom-format"></span> .k-i-custom-format</li>
    <li><span class="k-icon k-i-decimal-increase"></span> .k-i-decimal-increase</li>
    <li><span class="k-icon k-i-decimal-decrease"></span> .k-i-decimal-decrease</li>
    <li><span class="k-icon k-i-font-size"></span> .k-i-font-size</li>
    <li><span class="k-icon k-i-image-absolute-position"></span> .k-i-image-absolute-position</li>
</ul>

### Files and Folders

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-folder"></span> .k-i-folder</li>
    <li><span class="k-icon k-i-folder-open"></span> .k-i-folder-open</li>
    <li><span class="k-icon k-i-folder-add"></span> .k-i-folder-add</li>
    <li><span class="k-icon k-i-folder-up"></span> .k-i-folder-up</li>
    <li><span class="k-icon k-i-folder-more"></span> .k-i-folder-more<br /> .k-i-fields-more</li>
    <li><span class="k-icon k-i-aggregate-fields"></span> .k-i-aggregate-fields</li>
    <li><span class="k-icon k-i-file"></span> .k-i-file<br /> .k-i-file-vertical</li>
    <li><span class="k-icon k-i-file-add"></span> .k-i-file-add</li>
    <li><span class="k-icon k-i-file-txt"></span> .k-i-file-txt<br /> .k-i-txt</li>
    <li><span class="k-icon k-i-file-csv"></span> .k-i-file-csv<br /> .k-i-csv</li>
    <li><span class="k-icon k-i-file-excel"></span> .k-i-file-excel<br /> .k-i-file-xls<br /> .k-i-excel<br /> .k-i-xls</li>
    <li><span class="k-icon k-i-file-word"></span> .k-i-file-word<br /> .k-i-file-doc<br /> .k-i-word<br /> .k-i-doc</li>
    <li><span class="k-icon k-i-file-mdb"></span> .k-i-file-mdb<br /> .k-i-mdb</li>
    <li><span class="k-icon k-i-file-ppt"></span> .k-i-file-ppt<br /> .k-i-ppt</li>
    <li><span class="k-icon k-i-file-pdf"></span> .k-i-file-pdf<br /> .k-i-pdf</li>
    <li><span class="k-icon k-i-file-psd"></span> .k-i-file-psd<br /> .k-i-psd</li>
    <li><span class="k-icon k-i-file-flash"></span> .k-i-file-flash<br /> .k-i-flash</li>
    <li><span class="k-icon k-i-file-config"></span> .k-i-file-config<br /> .k-i-config</li>
    <li><span class="k-icon k-i-file-ascx"></span> .k-i-file-ascx<br /> .k-i-ascx</li>
    <li><span class="k-icon k-i-file-bac"></span> .k-i-file-bac<br /> .k-i-bac</li>
    <li><span class="k-icon k-i-file-zip"></span> .k-i-file-zip<br /> .k-i-zip</li>
    <li><span class="k-icon k-i-film"></span> .k-i-film</li>
    <li><span class="k-icon k-i-css3"></span> .k-i-css3</li>
    <li><span class="k-icon k-i-html5"></span> .k-i-html5</li>
    <li><span class="k-icon k-i-html"></span> .k-i-html<br /> .k-i-source-code<br /> .k-i-view-source</li>
    <li><span class="k-icon k-i-css"></span> .k-i-css</li>
    <li><span class="k-icon k-i-js"></span> .k-i-js</li>
    <li><span class="k-icon k-i-exe"></span> .k-i-exe</li>
    <li><span class="k-icon k-i-csproj"></span> .k-i-csproj</li>
    <li><span class="k-icon k-i-vbproj"></span> .k-i-vbproj</li>
    <li><span class="k-icon k-i-cs"></span> .k-i-cs</li>
    <li><span class="k-icon k-i-vb"></span> .k-i-vb</li>
    <li><span class="k-icon k-i-sln"></span> .k-i-sln</li>
    <li><span class="k-icon k-i-cloud"></span> .k-i-cloud</li>
    <li><span class="k-icon k-i-file-horizontal"></span> .k-i-file-horizontal</li>

</ul>

### Images

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-photo-camera"></span> .k-i-photo-camera</li>
    <li><span class="k-icon k-i-image"></span> .k-i-image<br /> .k-i-photo</li>
    <li><span class="k-icon k-i-image-export"></span> .k-i-image-export<br /> .k-i-photo-export</li>
    <li><span class="k-icon k-i-zoom-actual-size"></span> .k-i-zoom-actual-size</li>
    <li><span class="k-icon k-i-zoom-best-fit"></span> .k-i-zoom-best-fit</li>
    <li><span class="k-icon k-i-image-resize"></span> .k-i-image-resize</li>
    <li><span class="k-icon k-i-crop"></span> .k-i-crop</li>
    <li><span class="k-icon k-i-mirror"></span> .k-i-mirror</li>
    <li><span class="k-icon k-i-flip-horizontal"></span> .k-i-flip-horizontal</li>
    <li><span class="k-icon k-i-flip-vertical"></span> .k-i-flip-vertical</li>
    <li><span class="k-icon k-i-rotate"></span> .k-i-rotate</li>
    <li><span class="k-icon k-i-rotate-right"></span> .k-i-rotate-right</li>
    <li><span class="k-icon k-i-rotate-left"></span> .k-i-rotate-left</li>
    <li><span class="k-icon k-i-brush"></span> .k-i-brush</li>
    <li><span class="k-icon k-i-palette"></span> .k-i-palette</li>
    <li><span class="k-icon k-i-paint"></span> .k-i-paint<br /> .k-i-droplet<br /> .k-i-background</li>
    <li><span class="k-icon k-i-line"></span> .k-i-line<br /> .k-i-shape-line</li>
    <li><span class="k-icon k-i-brightness-contrast"></span> .k-i-brightness-contrast</li>
    <li><span class="k-icon k-i-saturation"></span> .k-i-saturation</li>
    <li><span class="k-icon k-i-invert-colors"></span> .k-i-invert-colors</li>
    <li><span class="k-icon k-i-transperancy"></span> .k-i-transperancy<br /> .k-i-opacity</li>
    <li><span class="k-icon k-i-greyscale"></span> .k-i-greyscale</li>
    <li><span class="k-icon k-i-blur"></span> .k-i-blur</li>
    <li><span class="k-icon k-i-sharpen"></span> .k-i-sharpen</li>
    <li><span class="k-icon k-i-shape"></span> .k-i-shape</li>
    <li><span class="k-icon k-i-round-corners"></span> .k-i-round-corners</li>
    <li><span class="k-icon k-i-front-element"></span> .k-i-front-element</li>
    <li><span class="k-icon k-i-back-element"></span> .k-i-back-element</li>
    <li><span class="k-icon k-i-forward-element"></span> .k-i-forward-element</li>
    <li><span class="k-icon k-i-backward-element"></span> .k-i-backward-element</li>
    <li><span class="k-icon k-i-align-left-element"></span> .k-i-align-left-element</li>
    <li><span class="k-icon k-i-align-center-element"></span> .k-i-align-center-element</li>
    <li><span class="k-icon k-i-align-right-element"></span> .k-i-align-right-element</li>
    <li><span class="k-icon k-i-align-top-element"></span> .k-i-align-top-element</li>
    <li><span class="k-icon k-i-align-middle-element"></span> .k-i-align-middle-element</li>
    <li><span class="k-icon k-i-align-bottom-element"></span> .k-i-align-bottom-element</li>
    <li><span class="k-icon k-i-thumbnails-up"></span> .k-i-thumbnails-up</li>
    <li><span class="k-icon k-i-thumbnails-right"></span> .k-i-thumbnails-right</li>
    <li><span class="k-icon k-i-thumbnails-down"></span> .k-i-thumbnails-down</li>
    <li><span class="k-icon k-i-thumbnails-left"></span> .k-i-thumbnails-left</li>
    <li><span class="k-icon k-i-full-screen"></span> .k-i-full-screen<br /> .k-i-fullscreen</li>
    <li><span class="k-icon k-i-full-screen-exit"></span> .k-i-full-screen-exit<br /> .k-i-fullscreen-exit</li>
    <li><span class="k-icon k-i-reset-color"></span> .k-i-reset-color<br /> .k-i-paint-remove<br /> .k-i-background-remove</li>
</ul>

### Layout and Navigation

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-arrow-45-up-right"></span> .k-i-arrow-45-up-right<br /> .k-i-collapse-ne<br /> .k-i-resize-ne</li>
    <li><span class="k-icon k-i-arrow-45-down-right"></span> .k-i-arrow-45-down-right<br /> .k-i-collapse-se<br /> .k-i-resize-se</li>
    <li><span class="k-icon k-i-arrow-45-down-left"></span> .k-i-arrow-45-down-left<br /> .k-i-collapse-sw<br /> .k-i-resize-sw</li>
    <li><span class="k-icon k-i-arrow-45-up-left"></span> .k-i-arrow-45-up-left<br />  .k-i-collapse-nw<br />  .k-i-resize-new</li>
    <li><span class="k-icon k-i-arrow-60-up"></span> .k-i-arrow-60-up</li>
    <li><span class="k-icon k-i-arrow-60-right"></span> .k-i-arrow-60-right</li>
    <li><span class="k-icon k-i-arrow-60-down"></span> .k-i-arrow-60-down</li>
    <li><span class="k-icon k-i-arrow-60-left"></span> .k-i-arrow-60-left</li>
    <li><span class="k-icon k-i-arrow-end-up"></span> .k-i-arrow-end-up</li>
    <li><span class="k-icon k-i-arrow-end-right"></span> .k-i-arrow-end-right</li>
    <li><span class="k-icon k-i-arrow-end-down"></span> .k-i-arrow-end-down</li>
    <li><span class="k-icon k-i-arrow-end-left"></span> .k-i-arrow-end-left</li>
    <li><span class="k-icon k-i-arrow-double-60-up"></span> .k-i-arrow-double-60-up</li>
    <li><span class="k-icon k-i-arrow-seek-up"></span> .k-i-arrow-seek-up</li>
    <li><span class="k-icon k-i-arrow-double-60-right"></span> .k-i-arrow-double-60-right</li>
    <li><span class="k-icon k-i-arrow-seek-right"></span> .k-i-arrow-seek-right</li>
    <li><span class="k-icon k-i-arrow-double-60-down"></span> .k-i-arrow-double-60-down</li>
    <li><span class="k-icon k-i-arrow-seek-down"></span> .k-i-arrow-seek-down</li>
    <li><span class="k-icon k-i-arrow-double-60-left"></span> .k-i-arrow-double-60-left</li>
    <li><span class="k-icon k-i-arrows-kpi"></span> .k-i-arrows-kpi<br /> .k-i-kpi</li>
    <li><span class="k-icon k-i-arrows-no-change"></span> .k-i-arrows-no-change</li>
    <li><span class="k-icon k-i-arrow-overflow-down"></span> .k-i-arrow-overflow-down</li>
    <li><span class="k-icon k-i-arrow-chevron-up"></span> .k-i-arrow-chevron-up</li>
    <li><span class="k-icon k-i-arrow-chevron-right"></span> .k-i-arrow-chevron-right</li>
    <li><span class="k-icon k-i-arrow-chevron-down"></span> .k-i-arrow-chevron-down</li>
    <li><span class="k-icon k-i-arrow-chevron-left"></span> .k-i-arrow-chevron-left</li>
    <li><span class="k-icon k-i-arrow-up"></span> .k-i-arrow-up</li>
    <li><span class="k-icon k-i-arrow-right"></span> .k-i-arrow-right</li>
    <li><span class="k-icon k-i-arrow-down"></span> .k-i-arrow-down</li>
    <li><span class="k-icon k-i-arrow-left"></span> .k-i-arrow-left</li>
    <li><span class="k-icon k-i-arrow-drill"></span> .k-i-arrow-drill</li>
    <li><span class="k-icon k-i-arrow-parent"></span> .k-i-arrow-parent</li>
    <li><span class="k-icon k-i-arrow-root"></span> .k-i-arrow-root</li>
    <li><span class="k-icon k-i-arrows-resizing"></span> .k-i-arrows-resizing</li>
    <li><span class="k-icon k-i-arrows-dimensions"></span> .k-i-arrows-dimensions</li>
    <li><span class="k-icon k-i-arrows-swap"></span> .k-i-arrows-swap</li>
    <li><span class="k-icon k-i-drag-and-drop"></span> .k-i-drag-and-drop</li>
    <li><span class="k-icon k-i-categorize"></span> .k-i-categorize</li>
    <li><span class="k-icon k-i-grid"></span> .k-i-grid</li>
    <li><span class="k-icon k-i-grid-layout"></span> .k-i-grid-layout</li>
    <li><span class="k-icon k-i-group"></span> .k-i-group</li>
    <li><span class="k-icon k-i-ungroup"></span> .k-i-ungroup</li>
    <li><span class="k-icon k-i-handler-drag"></span> .k-i-handler-drag</li>
    <li><span class="k-icon k-i-layout"></span> .k-i-layout</li>
    <li><span class="k-icon k-i-layout-1-by-4"></span> .k-i-layout-1-by-4</li>
    <li><span class="k-icon k-i-layout-2-by-2"></span> .k-i-layout-2-by-2</li>
    <li><span class="k-icon k-i-layout-side-by-side"></span> .k-i-layout-side-by-side</li>
    <li><span class="k-icon k-i-layout-stacked"></span> .k-i-layout-stacked</li>
    <li><span class="k-icon k-i-columns"></span> .k-i-columns</li>
    <li><span class="k-icon k-i-rows"></span> .k-i-rows</li>
    <li><span class="k-icon k-i-reorder"></span> .k-i-reorder</li>
    <li><span class="k-icon k-i-menu"></span> .k-i-menu</li>
    <li><span class="k-icon k-i-more-vertical"></span> .k-i-more-vertical</li>
    <li><span class="k-icon k-i-more-horizontal"></span> .k-i-more-horizontal</li>
</ul>

### Mapping

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-globe-outline"></span> .k-i-globe-outline</li>
    <li><span class="k-icon k-i-globe"></span> .k-i-globe</li>
    <li><span class="k-icon k-i-marker-pin"></span> .k-i-marker-pin</li>
    <li><span class="k-icon k-i-marker-pin-target"></span> .k-i-marker-pin-target</li>
    <li><span class="k-icon k-i-pin"></span> .k-i-pin</li>
    <li><span class="k-icon k-i-unpin"></span> .k-i-unpin</li>
</ul>

### Media

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-play"></span> .k-i-play</li>
    <li><span class="k-icon k-i-pause"></span> .k-i-pause</li>
    <li><span class="k-icon k-i-stop"></span> .k-i-stop</li>
    <li><span class="k-icon k-i-rewind"></span> .k-i-rewind</li>
    <li><span class="k-icon k-i-forward"></span> .k-i-forward</li>
    <li><span class="k-icon k-i-volume-down"></span> .k-i-volume-down</li>
    <li><span class="k-icon k-i-volume-up"></span> .k-i-volume-up</li>
    <li><span class="k-icon k-i-volume-off"></span> .k-i-volume-off</li>
    <li><span class="k-icon k-i-hd"></span> .k-i-hd</li>
    <li><span class="k-icon k-i-subtitles"></span> .k-i-subtitles</li>
    <li><span class="k-icon k-i-playlist"></span> .k-i-playlist</li>
    <li><span class="k-icon k-i-audio"></span> .k-i-audio</li>
</ul>

### Social Sharing

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-share"></span> .k-i-share</li>
    <li><span class="k-icon k-i-user"></span> .k-i-user</li>
    <li><span class="k-icon k-i-inbox"></span> .k-i-inbox</li>
    <li><span class="k-icon k-i-blogger"></span> .k-i-blogger</li>
    <li><span class="k-icon k-i-blogger-box"></span> .k-i-blogger-box</li>
    <li><span class="k-icon k-i-delicious"></span> .k-i-delicious</li>
    <li><span class="k-icon k-i-delicious-box"></span> .k-i-delicious-box</li>
    <li><span class="k-icon k-i-digg"></span> .k-i-digg</li>
    <li><span class="k-icon k-i-digg-box"></span> .k-i-digg-box</li>
    <li><span class="k-icon k-i-email"></span> .k-i-email<br /> .k-i-envelop<br /> .k-i-letter</li>
    <li><span class="k-icon k-i-email-box"></span> .k-i-email-box<br /> .k-i-envelop-box<br /> .k-i-letter-box</li>
    <li><span class="k-icon k-i-facebook"></span> .k-i-facebook</li>
    <li><span class="k-icon k-i-facebook-box"></span> .k-i-facebook-box</li>
    <li><span class="k-icon k-i-google"></span> .k-i-google</li>
    <li><span class="k-icon k-i-google-box"></span> .k-i-google-box</li>
    <li><span class="k-icon k-i-google-plus"></span> .k-i-google-plus</li>
    <li><span class="k-icon k-i-google-plus-box"></span> .k-i-google-plus-box</li>
    <li><span class="k-icon k-i-linkedin"></span> .k-i-linkedin</li>
    <li><span class="k-icon k-i-linkedin-box"></span> .k-i-linkedin-box</li>
    <li><span class="k-icon k-i-myspace"></span> .k-i-myspace</li>
    <li><span class="k-icon k-i-myspace-box"></span> .k-i-myspace-box</li>
    <li><span class="k-icon k-i-pinterest"></span> .k-i-pinterest</li>
    <li><span class="k-icon k-i-pinterest-box"></span> .k-i-pinterest-box</li>
    <li><span class="k-icon k-i-reddit"></span> .k-i-reddit</li>
    <li><span class="k-icon k-i-reddit-box"></span> .k-i-reddit-box</li>
    <li><span class="k-icon k-i-stumble-upon"></span> .k-i-stumble-upon</li>
    <li><span class="k-icon k-i-stumble-upon-box"></span> .k-i-stumble-upon-box</li>
    <li><span class="k-icon k-i-tell-a-friend"></span> .k-i-tell-a-friend</li>
    <li><span class="k-icon k-i-tell-a-friend-box"></span> .k-i-tell-a-friend-box</li>
    <li><span class="k-icon k-i-tumblr"></span> .k-i-tumblr</li>
    <li><span class="k-icon k-i-tumblr-box"></span> .k-i-tumblr-box</li>
    <li><span class="k-icon k-i-twitter"></span> .k-i-twitter</li>
    <li><span class="k-icon k-i-twitter-box"></span> .k-i-twitter-box</li>
    <li><span class="k-icon k-i-yammer"></span> .k-i-yammer</li>
    <li><span class="k-icon k-i-yammer-box"></span> .k-i-yammer-box</li>
    <li><span class="k-icon k-i-behance"></span> .k-i-behance</li>
    <li><span class="k-icon k-i-behance-box"></span> .k-i-behance-box</li>
    <li><span class="k-icon k-i-dribbble"></span> .k-i-dribbble</li>
    <li><span class="k-icon k-i-dribbble-box"></span> .k-i-dribbble-box</li>
    <li><span class="k-icon k-i-rss"></span> .k-i-rss</li>
    <li><span class="k-icon k-i-rss-box"></span> .k-i-rss-box</li>
    <li><span class="k-icon k-i-vimeo"></span> .k-i-vimeo</li>
    <li><span class="k-icon k-i-vimeo-box"></span> .k-i-vimeo-box</li>
    <li><span class="k-icon k-i-youtube"></span> .k-i-youtube</li>
    <li><span class="k-icon k-i-youtube-box"></span> .k-i-youtube-box</li>
</ul>

### Toggle

<ul class="WebComponentsIcons">
    <li><span class="k-icon k-i-heart-outline"></span> .k-i-heart-outline<br /> .k-i-fav-outline<br /> .k-i-favorite-outline</li>
    <li><span class="k-icon k-i-heart"></span> .k-i-heart<br /> .k-i-fav<br /> .k-i-favorite</li>
    <li><span class="k-icon k-i-star-outline"></span> .k-i-star-outline<br /> .k-i-bookmark-outline</li>
    <li><span class="k-icon k-i-star"></span> .k-i-star<br /> .k-i-bookmark</li>
    <li><span class="k-icon k-i-checkbox"></span> .k-i-checkbox<br /> .k-i-shape-rect</li>
    <li><span class="k-icon k-i-checkbox-checked"></span> .k-i-checkbox-checked</li>
    <li><span class="k-icon k-i-tri-state-indeterminate"></span> .k-i-tri-state-indeterminate</li>
    <li><span class="k-icon k-i-tri-state-null"></span> .k-i-tri-state-null</li>
    <li><span class="k-icon k-i-circle"></span> .k-i-circle</li>
    <li><span class="k-icon k-i-radiobutton"></span> .k-i-radiobutton<br /> .k-i-shape-circle</li>
    <li><span class="k-icon k-i-radiobutton-checked"></span> .k-i-radiobutton-checked</li>
</ul>

<script>
  $(".k-icon").each(function() {
    function iconGlyph(el) {
      return window.getComputedStyle(el,':before').content.charCodeAt(1).toString(16);
    }
    $(this.parentNode).append("<div>Unicode: " + iconGlyph(this) + "</div>")
  });
</script>

## Suggested Links

* [Themes and Styling in Kendo UI for Vue](slug:themesandstyles)
* [Getting Started with Kendo UI for Vue](slug:getting_started)
