Edit this page

# Web Font Icons

As of the R1 2017 release, Kendo UI delivers 400 integrated font icons intended for the web and data visualization widgets of the suite.

These icons can be used directly in a Kendo UI web project by assigning one of the predefined CSS classes provided in the list of font icons below.

The following example demonstrates how to achieve this behavior.

###### Example

Open In Dojo

        <span class="k-icon k-i-copy"></span>

The following example demonstrates how to add a font icon to a Kendo UI Button.

###### Example

Open In Dojo

        <a class="k-button" href="#">
            <span class="k-icon k-i-copy"></span> Copy
        </a>

## What Are Icon Fonts

Icon fonts are fonts which contain vector glyphs instead of letters and numbers. You can easily 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 utilization of icon fonts in a user interface (UI) naturally succeeds the somehow outdated icon sprite technique.

Font icons demonstrate significant benefits such as:

- Improved scalability—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—You can easily apply CSS effects on the fly by setting the text color, shadow, or other options for different interaction states. For example, on `:hover`.
- Improved browser support—Font icons are browser-agnostic and are supported by all modern browsers.
- Reduced number of HTTP requests—To load an icon font, you need a maximum of a few HTTP requests.
- Reduced file size—A 100KB file contains approximately 500 vector icons.

## Basic Usage

To use the Kendo UI font icons:

1. Load 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 to an HTML tag. For example, the `<span>` element as demonstrated in the following example.

Open In Dojo

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

Open In Dojo

    <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.
- Application of icon colors.
- Flipping of icons.

### Sizes

The Kendo UI font icons are designed on a 16px grid base. To achieve a pixel-perfect icon display, scale up by maintaining the 16-unit measure (32, 48, 64, and so on).

You can scale icons by just setting the `font-size` configuration option.

Open In Dojo

    <span class="k-icon k-i-gear"></span>
    <span class="k-icon k-i-gear k-icon-32"></span>
    <span class="k-icon k-i-gear k-icon-48"></span>
    <span class="k-icon k-i-gear k-icon-64"></span>

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

        .k-icon-48 {
            font-size: 48px; /* Sets icon size to 48px */
        }

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

### Colors

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

Open In Dojo

    <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

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

Open In Dojo

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

## List of Font Icons

The font icons are sorted in groups, depending on the function they help you to illustrate.

- Actions
- Alerts and Notifications
- Editing
- Files and Folders
- Images
- Layout and Navigation
- Mapping
- Media
- Social Sharing
- Toggle

### Actions

- .k-i-undo
  Unicode: e100
- .k-i-redo
  Unicode: e101
- .k-i-reset
  Unicode: e102
- .k-i-reload
  .k-i-refresh
  .k-i-recurrence
  Unicode: e103
- .k-i-non-recurrence
  Unicode: e104
- .k-i-reset-sm
  Unicode: e105
- .k-i-reload-sm
  .k-i-refresh-sm
  .k-i-recurrence-sm
  Unicode: e106
- .k-i-clock
  Unicode: e107
- .k-i-calendar
  Unicode: e108
- .k-i-save
  .k-i-floppy
  Unicode: e109
- .k-i-print
  .k-i-printer
  Unicode: e10a
- .k-i-edit
  .k-i-pencil
  Unicode: e10b
- .k-i-delete
  .k-i-trash
  Unicode: e10c
- .k-i-attachment
  .k-i-clip
  Unicode: e10d
- .k-i-attachment-45
  .k-i-clip-45
  Unicode: e10e
- .k-i-link-horizontal
  .k-i-hyperlink
  Unicode: e10f
- .k-i-unlink-horizontal
  .k-i-hyperlink-remove
  Unicode: e110
- .k-i-link-vertical
  Unicode: e111
- .k-i-unlink-vertical
  Unicode: e112
- .k-i-lock
  Unicode: e113
- .k-i-unlock
  Unicode: e114
- .k-i-cancel
  Unicode: e115
- .k-i-cancel-outline
  Unicode: e116
- .k-i-cancel-circle
  Unicode: e117
- .k-i-check
  .k-i-checkmark
  Unicode: e118
- .k-i-check-outline
  .k-i-checkmark-outline
  .k-i-success
  Unicode: e119
- .k-i-check-circle
  .k-i-checkmark-circle
  Unicode: e11a
- .k-i-close
  .k-i-x
  Unicode: e11b
- .k-i-close-outline
  .k-i-x-outline
  .k-i-error
  Unicode: e11c
- .k-i-close-circle
  .k-i-x-circle
  Unicode: e11d
- .k-i-plus
  Unicode: e11e
- .k-i-plus-outline
  Unicode: e11f
- .k-i-plus-circle
  Unicode: e120
- .k-i-minus
  .k-i-kpi-trend-equal
  Unicode: e121
- .k-i-minus-outline
  Unicode: e122
- .k-i-minus-circle
  Unicode: e123
- .k-i-sort-asc
  Unicode: e124
- .k-i-sort-desc
  Unicode: e125
- .k-i-unsort
  Unicode: e126
- .k-i-sort-clear
  Unicode: e126
- .k-i-sort-asc-sm
  Unicode: e127
- .k-i-sort-desc-sm
  Unicode: e128
- .k-i-filter
  Unicode: e129
- .k-i-filter-clear
  Unicode: e12a
- .k-i-filter-sm
  Unicode: e12b
- .k-i-filter-sort-asc-sm
  Unicode: e12c
- .k-i-filter-sort-desc-sm
  Unicode: e12d
- .k-i-filter-add-expression
  Unicode: e12e
- .k-i-filter-add-group
  Unicode: e12f
- .k-i-login
  Unicode: e130
- .k-i-logout
  Unicode: e131
- .k-i-download
  Unicode: e132
- .k-i-upload
  Unicode: e133
- .k-i-hyperlink-open
  Unicode: e134
- .k-i-hyperlink-open-sm
  Unicode: e135
- .k-i-launch
  Unicode: e136
- .k-i-window
  .k-i-window-maximize
  Unicode: e137
- .k-i-windows
  .k-i-window-restore
  .k-i-tiles
  Unicode: e138
- .k-i-window-minimize
  Unicode: e139
- .k-i-gear
  .k-i-cog
  .k-i-custom
  Unicode: e13a
- .k-i-gears
  .k-i-cogs
  Unicode: e13b
- .k-i-wrench
  .k-i-settings
  Unicode: e13c
- .k-i-preview
  .k-i-eye
  Unicode: e13d
- .k-i-zoom
  .k-i-search
  Unicode: e13e
- .k-i-zoom-in
  Unicode: e13f
- .k-i-zoom-out
  Unicode: e140
- .k-i-pan
  .k-i-move
  Unicode: e141
- .k-i-calculator
  Unicode: e142
- .k-i-cart
  .k-i-shopping-cart
  Unicode: e143
- .k-i-connector
  Unicode: e144
- .k-i-plus-sm
  Unicode: e145
- .k-i-minus-sm
  Unicode: e146
- .k-i-kpi-status-deny
  Unicode: e147
- .k-i-kpi-status-hold
  Unicode: e148
- .k-i-kpi-status-open
  Unicode: e149

### Alerts and Notifications

- .k-i-notification
  .k-i-bell
  Unicode: e400
- .k-i-information
  .k-i-info
  Unicode: e401
- .k-i-question
  .k-i-help
  Unicode: e402
- .k-i-warning
  .k-i-exception
  Unicode: e403

### Editing

- .k-i-page-properties
  Unicode: e600
- .k-i-bold
  Unicode: e601
- .k-i-italic
  Unicode: e602
- .k-i-underline
  Unicode: e603
- .k-i-font-family
  Unicode: e604
- .k-i-foreground-color
  Unicode: e605
- .k-i-convert-lowercase
  Unicode: e606
- .k-i-convert-uppercase
  Unicode: e607
- .k-i-strikethrough
  Unicode: e608
- .k-i-sub-script
  Unicode: e609
- .k-i-sup-script
  Unicode: e60a
- .k-i-div
  Unicode: e60b
- .k-i-all
  Unicode: e60c
- .k-i-h1
  Unicode: e60d
- .k-i-h2
  Unicode: e60e
- .k-i-h3
  Unicode: e60f
- .k-i-h4
  Unicode: e610
- .k-i-h5
  Unicode: e611
- .k-i-h6
  Unicode: e612
- .k-i-list-ordered
  .k-i-list-numbered
  Unicode: e613
- .k-i-list-unordered
  .k-i-list-bulleted
  Unicode: e614
- .k-i-indent-increase
  .k-i-indent
  Unicode: e615
- .k-i-indent-decrease
  .k-i-outdent
  Unicode: e616
- .k-i-insert-up
  .k-i-insert-top
  Unicode: e617
- .k-i-insert-middle
  Unicode: e618
- .k-i-insert-down
  .k-i-insert-bottom
  Unicode: e619
- .k-i-align-top
  Unicode: e61a
- .k-i-align-middle
  Unicode: e61b
- .k-i-align-bottom
  Unicode: e61c
- .k-i-align-left
  Unicode: e61d
- .k-i-align-center
  Unicode: e61e
- .k-i-align-right
  Unicode: e61f
- .k-i-align-justify
  Unicode: e620
- .k-i-align-remove
  Unicode: e621
- .k-i-text-wrap
  Unicode: e622
- .k-i-rule-horizontal
  Unicode: e623
- .k-i-table-align-top-left
  Unicode: e624
- .k-i-table-align-top-center
  Unicode: e625
- .k-i-table-align-top-right
  Unicode: e626
- .k-i-table-align-middle-left
  Unicode: e627
- .k-i-table-align-middle-center
  Unicode: e628
- .k-i-table-align-middle-right
  Unicode: e629
- .k-i-table-align-bottom-left
  Unicode: e62a
- .k-i-table-align-bottom-center
  Unicode: e62b
- .k-i-table-align-bottom-right
  Unicode: e62c
- .k-i-table-align-remove
  Unicode: e62d
- .k-i-borders-all
  Unicode: e62e
- .k-i-borders-outside
  Unicode: e62f
- .k-i-borders-inside
  Unicode: e630
- .k-i-borders-inside-horizontal
  Unicode: e631
- .k-i-borders-inside-vertical
  Unicode: e632
- .k-i-border-top
  Unicode: e633
- .k-i-border-bottom
  Unicode: e634
- .k-i-border-left
  Unicode: e635
- .k-i-border-right
  Unicode: e636
- .k-i-border-no
  Unicode: e637
- .k-i-borders-show-hide
  Unicode: e638
- .k-i-form
  .k-i-border
  Unicode: e639
- .k-i-form-element
  Unicode: e63a
- .k-i-code-snippet
  Unicode: e63b
- .k-i-select-all
  Unicode: e63c
- .k-i-button
  Unicode: e63d
- .k-i-select-box
  Unicode: e63e
- .k-i-calendar-date
  Unicode: e63f
- .k-i-group-box
  Unicode: e640
- .k-i-textarea
  Unicode: e641
- .k-i-textbox
  Unicode: e642
- .k-i-textbox-hidden
  Unicode: e643
- .k-i-password
  Unicode: e644
- .k-i-paragraph-add
  Unicode: e645
- .k-i-edit-tools
  Unicode: e646
- .k-i-template-manager
  Unicode: e647
- .k-i-change-manually
  Unicode: e648
- .k-i-track-changes
  Unicode: e649
- .k-i-track-changes-enable
  Unicode: e64a
- .k-i-track-changes-accept
  Unicode: e64b
- .k-i-track-changes-accept-all
  Unicode: e64c
- .k-i-track-changes-reject
  Unicode: e64d
- .k-i-track-changes-reject-all
  Unicode: e64e
- .k-i-document-manager
  Unicode: e64f
- .k-i-custom-icon
  Unicode: e650
- .k-i-dictionary-add
  Unicode: e651
- .k-i-image-light-dialog
  .k-i-image-insert
  Unicode: e652
- .k-i-image-edit
  Unicode: e653
- .k-i-image-map-editor
  Unicode: e654
- .k-i-comment
  Unicode: e655
- .k-i-comment-remove
  Unicode: e656
- .k-i-comments-remove-all
  Unicode: e657
- .k-i-silverlight
  Unicode: e658
- .k-i-media-manager
  Unicode: e659
- .k-i-video-external
  Unicode: e65a
- .k-i-flash-manager
  Unicode: e65b
- .k-i-find-and-replace
  .k-i-find
  Unicode: e65c
- .k-i-copy
  .k-i-files
  Unicode: e65d
- .k-i-cut
  Unicode: e65e
- .k-i-paste
  Unicode: e65f
- .k-i-paste-as-html
  Unicode: e660
- .k-i-paste-from-word
  Unicode: e661
- .k-i-paste-from-word-strip-file
  Unicode: e662
- .k-i-paste-html
  Unicode: e663
- .k-i-paste-markdown
  Unicode: e664
- .k-i-paste-plain-text
  Unicode: e665
- .k-i-apply-format
  Unicode: e666
- .k-i-clear-css
  Unicode: e667
- .k-i-copy-format
  Unicode: e668
- .k-i-strip-all-formating
  Unicode: e669
- .k-i-strip-css-format
  Unicode: e66a
- .k-i-strip-font-elements
  Unicode: e66b
- .k-i-strip-span-elements
  Unicode: e66c
- .k-i-strip-word-formatting
  Unicode: e66d
- .k-i-format-code-block
  Unicode: e66e
- .k-i-style-builder
  Unicode: e66f
- .k-i-module-manager
  Unicode: e670
- .k-i-hyperlink-light-dialog
  .k-i-hyperlink-insert
  Unicode: e671
- .k-i-hyperlink-globe
  Unicode: e672
- .k-i-hyperlink-globe-remove
  Unicode: e673
- .k-i-hyperlink-email
  Unicode: e674
- .k-i-anchor
  Unicode: e675
- .k-i-table-light-dialog
  .k-i-table-insert
  Unicode: e676
- .k-i-table
  .k-i-table-unmerge
  Unicode: e677
- .k-i-table-properties
  Unicode: e678
- .k-i-table-cell
  Unicode: e679
- .k-i-table-cell-properties
  Unicode: e67a
- .k-i-table-column-insert-left
  Unicode: e67b
- .k-i-table-column-insert-right
  Unicode: e67c
- .k-i-table-row-insert-above
  Unicode: e67d
- .k-i-table-row-insert-below
  Unicode: e67e
- .k-i-table-column-delete
  Unicode: e67f
- .k-i-table-row-delete
  Unicode: e680
- .k-i-table-cell-delete
  Unicode: e681
- .k-i-table-delete
  Unicode: e682
- .k-i-cells-merge
  Unicode: e683
- .k-i-cells-merge-horizontally
  Unicode: e684
- .k-i-cells-merge-vertically
  Unicode: e685
- .k-i-cell-split-horizontally
  Unicode: e686
- .k-i-cell-split-vertically
  Unicode: e687
- .k-i-pane-freeze
  Unicode: e689
- .k-i-row-freeze
  Unicode: e68a
- .k-i-column-freeze
  Unicode: e68b
- .k-i-toolbar-float
  Unicode: e68c
- .k-i-spell-checker
  Unicode: e68d
- .k-i-validation-xhtml
  Unicode: e68e
- .k-i-validation-data
  Unicode: e68f
- .k-i-toggle-full-screen-mode
  Unicode: e690
- .k-i-formula-fx
  Unicode: e691
- .k-i-sum
  Unicode: e692
- .k-i-symbol
  Unicode: e693
- .k-i-dollar
  .k-i-currency
  Unicode: e694
- .k-i-percent
  Unicode: e695
- .k-i-custom-format
  Unicode: e696
- .k-i-decimal-increase
  Unicode: e697
- .k-i-decimal-decrease
  Unicode: e698
- .k-i-font-size
  Unicode: e699
- .k-i-image-absolute-position
  Unicode: e69a

### Files and Folders

- .k-i-folder
  Unicode: e900
- .k-i-folder-open
  Unicode: e901
- .k-i-folder-add
  Unicode: e902
- .k-i-folder-up
  Unicode: e903
- .k-i-folder-more
  .k-i-fields-more
  Unicode: e904
- .k-i-aggregate-fields
  Unicode: e905
- .k-i-file
  .k-i-file-vertical
  Unicode: e906
- .k-i-file-add
  Unicode: e907
- .k-i-file-txt
  .k-i-txt
  Unicode: e908
- .k-i-file-csv
  .k-i-csv
  Unicode: e909
- .k-i-file-excel
  .k-i-file-xls
  .k-i-excel
  .k-i-xls
  Unicode: e90a
- .k-i-file-word
  .k-i-file-doc
  .k-i-word
  .k-i-doc
  Unicode: e90b
- .k-i-file-mdb
  .k-i-mdb
  Unicode: e90c
- .k-i-file-ppt
  .k-i-ppt
  Unicode: e90d
- .k-i-file-pdf
  .k-i-pdf
  Unicode: e90e
- .k-i-file-psd
  .k-i-psd
  Unicode: e90f
- .k-i-file-flash
  .k-i-flash
  Unicode: e910
- .k-i-file-config
  .k-i-config
  Unicode: e911
- .k-i-file-ascx
  .k-i-ascx
  Unicode: e912
- .k-i-file-bac
  .k-i-bac
  Unicode: e913
- .k-i-file-zip
  .k-i-zip
  Unicode: e914
- .k-i-film
  Unicode: e915
- .k-i-css3
  Unicode: e916
- .k-i-html5
  Unicode: e917
- .k-i-html
  .k-i-source-code
  .k-i-view-source
  Unicode: e918
- .k-i-css
  Unicode: e919
- .k-i-js
  Unicode: e91a
- .k-i-exe
  Unicode: e91b
- .k-i-csproj
  Unicode: e91c
- .k-i-vbproj
  Unicode: e91d
- .k-i-cs
  Unicode: e91e
- .k-i-vb
  Unicode: e91f
- .k-i-sln
  Unicode: e920
- .k-i-cloud
  Unicode: e921
- .k-i-file-horizontal
  Unicode: e922

### Images

- .k-i-photo-camera
  Unicode: e500
- .k-i-image
  .k-i-photo
  Unicode: e501
- .k-i-image-export
  .k-i-photo-export
  Unicode: e502
- .k-i-zoom-actual-size
  Unicode: e503
- .k-i-zoom-best-fit
  Unicode: e504
- .k-i-image-resize
  Unicode: e505
- .k-i-crop
  Unicode: e506
- .k-i-mirror
  Unicode: e507
- .k-i-flip-horizontal
  Unicode: e508
- .k-i-flip-vertical
  Unicode: e509
- .k-i-rotate
  Unicode: e50a
- .k-i-rotate-right
  Unicode: e50b
- .k-i-rotate-left
  Unicode: e50c
- .k-i-brush
  Unicode: e50d
- .k-i-palette
  Unicode: e50e
- .k-i-paint
  .k-i-droplet
  .k-i-background
  Unicode: e50f
- .k-i-line
  .k-i-shape-line
  Unicode: e510
- .k-i-brightness-contrast
  Unicode: e511
- .k-i-saturation
  Unicode: e512
- .k-i-invert-colors
  Unicode: e513
- .k-i-transperancy
  .k-i-opacity
  Unicode: e514
- .k-i-greyscale
  Unicode: e515
- .k-i-blur
  Unicode: e516
- .k-i-sharpen
  Unicode: e517
- .k-i-shape
  Unicode: e518
- .k-i-round-corners
  Unicode: e519
- .k-i-front-element
  Unicode: e51a
- .k-i-back-element
  Unicode: e51b
- .k-i-forward-element
  Unicode: e51c
- .k-i-backward-element
  Unicode: e51d
- .k-i-align-left-element
  Unicode: e51e
- .k-i-align-center-element
  Unicode: e51f
- .k-i-align-right-element
  Unicode: e520
- .k-i-align-top-element
  Unicode: e521
- .k-i-align-middle-element
  Unicode: e522
- .k-i-align-bottom-element
  Unicode: e523
- .k-i-thumbnails-up
  Unicode: e524
- .k-i-thumbnails-right
  Unicode: e525
- .k-i-thumbnails-down
  Unicode: e526
- .k-i-thumbnails-left
  Unicode: e527
- .k-i-full-screen
  .k-i-fullscreen
  Unicode: e528
- .k-i-full-screen-exit
  .k-i-fullscreen-exit
  Unicode: e529
- .k-i-reset-color
  .k-i-paint-remove
  .k-i-background-remove
  Unicode: e52a

### Layout and Navigation

- .k-i-arrow-45-up-right
  .k-i-collapse-ne
  .k-i-resize-ne
  Unicode: e000
- .k-i-arrow-45-down-right
  .k-i-collapse-se
  .k-i-resize-se
  Unicode: e001
- .k-i-arrow-45-down-left
  .k-i-collapse-sw
  .k-i-resize-sw
  Unicode: e002
- .k-i-arrow-45-up-left
  .k-i-collapse-nw
  .k-i-resize-new
  Unicode: e003
- .k-i-arrow-60-up
  .k-i-kpi-trend-increase
  Unicode: e004
- .k-i-arrow-60-right
  Unicode: e005
- .k-i-arrow-60-down
  .k-i-kpi-trend-decrease
  Unicode: e006
- .k-i-arrow-60-left
  Unicode: e007
- .k-i-arrow-end-up
  Unicode: e008
- .k-i-arrow-end-right
  Unicode: e009
- .k-i-arrow-end-down
  Unicode: e00a
- .k-i-arrow-end-left
  Unicode: e00b
- .k-i-arrow-double-60-up
  Unicode: e00c
- .k-i-arrow-seek-up
  Unicode: e00c
- .k-i-arrow-double-60-right
  .k-i-forward-sm
  Unicode: e00d
- .k-i-arrow-seek-right
  Unicode: e00d
- .k-i-arrow-double-60-down
  Unicode: e00e
- .k-i-arrow-seek-down
  Unicode: e00e
- .k-i-arrow-double-60-left
  .k-i-rewind-sm
  Unicode: e00f
- .k-i-arrows-kpi
  .k-i-kpi
  Unicode: e010
- .k-i-arrows-no-change
  Unicode: e011
- .k-i-arrow-overflow-down
  Unicode: e012
- .k-i-arrow-chevron-up
  Unicode: e013
- .k-i-arrow-chevron-right
  Unicode: e014
- .k-i-arrow-chevron-down
  Unicode: e015
- .k-i-arrow-chevron-left
  Unicode: e016
- .k-i-arrow-up
  Unicode: e017
- .k-i-arrow-right
  Unicode: e018
- .k-i-arrow-down
  Unicode: e019
- .k-i-arrow-left
  Unicode: e01a
- .k-i-arrow-drill
  Unicode: e01b
- .k-i-arrow-parent
  Unicode: e01c
- .k-i-arrow-root
  Unicode: e01d
- .k-i-arrows-resizing
  Unicode: e01e
- .k-i-arrows-dimensions
  Unicode: e01f
- .k-i-arrows-swap
  Unicode: e020
- .k-i-drag-and-drop
  Unicode: e021
- .k-i-categorize
  Unicode: e022
- .k-i-grid
  Unicode: e023
- .k-i-grid-layout
  Unicode: e024
- .k-i-group
  Unicode: e025
- .k-i-ungroup
  Unicode: e026
- .k-i-handler-drag
  Unicode: e027
- .k-i-layout
  Unicode: e028
- .k-i-layout-1-by-4
  Unicode: e029
- .k-i-layout-2-by-2
  Unicode: e02a
- .k-i-layout-side-by-side
  Unicode: e02b
- .k-i-layout-stacked
  Unicode: e02c
- .k-i-columns
  Unicode: e02d
- .k-i-rows
  Unicode: e02e
- .k-i-reorder
  Unicode: e02f
- .k-i-menu
  Unicode: e030
- .k-i-more-vertical
  Unicode: e031
- .k-i-more-horizontal
  Unicode: e032

### Mapping

- .k-i-globe-outline
  Unicode: e700
- .k-i-globe
  Unicode: e701
- .k-i-marker-pin
  Unicode: e702
- .k-i-marker-pin-target
  Unicode: e703
- .k-i-pin
  Unicode: e704
- .k-i-unpin
  Unicode: e705

### Media

- .k-i-play
  Unicode: e200
- .k-i-pause
  Unicode: e201
- .k-i-stop
  Unicode: e202
- .k-i-rewind
  Unicode: e203
- .k-i-forward
  Unicode: e204
- .k-i-volume-down
  Unicode: e205
- .k-i-volume-up
  Unicode: e206
- .k-i-volume-off
  Unicode: e207
- .k-i-hd
  Unicode: e208
- .k-i-subtitles
  Unicode: e209
- .k-i-playlist
  Unicode: e20a
- .k-i-audio
  Unicode: e20b

### Social Sharing

- .k-i-share
  Unicode: e800
- .k-i-user
  Unicode: e801
- .k-i-inbox
  Unicode: e802
- .k-i-blogger
  Unicode: e803
- .k-i-blogger-box
  Unicode: e804
- .k-i-delicious
  Unicode: e805
- .k-i-delicious-box
  Unicode: e806
- .k-i-digg
  Unicode: e807
- .k-i-digg-box
  Unicode: e808
- .k-i-email
  .k-i-envelop
  .k-i-letter
  Unicode: e809
- .k-i-email-box
  .k-i-envelop-box
  .k-i-letter-box
  Unicode: e80a
- .k-i-facebook
  Unicode: e80b
- .k-i-facebook-box
  Unicode: e80c
- .k-i-google
  Unicode: e80d
- .k-i-google-box
  Unicode: e80e
- .k-i-google-plus
  Unicode: e80f
- .k-i-google-plus-box
  Unicode: e810
- .k-i-linkedin
  Unicode: e811
- .k-i-linkedin-box
  Unicode: e812
- .k-i-myspace
  Unicode: e813
- .k-i-myspace-box
  Unicode: e814
- .k-i-pinterest
  Unicode: e815
- .k-i-pinterest-box
  Unicode: e816
- .k-i-reddit
  Unicode: e817
- .k-i-reddit-box
  Unicode: e818
- .k-i-stumble-upon
  Unicode: e819
- .k-i-stumble-upon-box
  Unicode: e81a
- .k-i-tell-a-friend
  Unicode: e81b
- .k-i-tell-a-friend-box
  Unicode: e81c
- .k-i-tumblr
  Unicode: e81d
- .k-i-tumblr-box
  Unicode: e81e
- .k-i-twitter
  Unicode: e81f
- .k-i-twitter-box
  Unicode: e820
- .k-i-yammer
  Unicode: e821
- .k-i-yammer-box
  Unicode: e822
- .k-i-behance
  Unicode: e823
- .k-i-behance-box
  Unicode: e824
- .k-i-dribbble
  Unicode: e825
- .k-i-dribbble-box
  Unicode: e826
- .k-i-rss
  Unicode: e827
- .k-i-rss-box
  Unicode: e828
- .k-i-vimeo
  Unicode: e829
- .k-i-vimeo-box
  Unicode: e82a
- .k-i-youtube
  Unicode: e82b
- .k-i-youtube-box
  Unicode: e82c

### Toggle

- .k-i-heart-outline
  .k-i-fav-outline
  .k-i-favorite-outline
  Unicode: e300
- .k-i-heart
  .k-i-fav
  .k-i-favorite
  Unicode: e301
- .k-i-star-outline
  .k-i-bookmark-outline
  Unicode: e302
- .k-i-star
  .k-i-bookmark
  Unicode: e303
- .k-i-checkbox
  .k-i-shape-rect
  Unicode: e304
- .k-i-checkbox-checked
  Unicode: e305
- .k-i-tri-state-indeterminate
  Unicode: e306
- .k-i-tri-state-null
  Unicode: e307
- .k-i-circle
  Unicode: e308
- .k-i-radiobutton
  .k-i-shape-circle
  Unicode: e309
- .k-i-radiobutton-checked
  Unicode: e30a

## See Also

Other articles on styling, appearance, and rendering of Kendo UI widgets:

- Themes and Appearance of the Kendo UI Widgets
- Responsive Web Design
- How to Change Themes on the Client
- Sass ThemeBuilder Overview
- Less ThemeBuilder Overview
- Rendering Modes for Data Visualization
- Troubleshooting
- Themes and Appearance of the Kendo UI Hybrid Widgets

Is this article helpful? Yes / No
Thank you for your feedback!
Dummy

# Give article feedback

Tell us how we can improve this article

Code samples are inaccurate / outdated. I expected to find other / more information. There are typos / broken links / broken page elements. Content is inaccurate / outdated. Other By checking this box you consent to Progress contacting you by email about your response on this page.

- Search in Documentation
- Search in Knowledge Base
- Search in API Reference

## Privacy Preference Center

###

Active

Always Active

Save Settings
Allow All

We use cookies to personalize content and ads, to provide social media features and to analyze our traffic. Some of these cookies also help improve your user experience on our websites, assist with navigation and your ability to provide feedback, and assist with our promotional and marketing efforts. Please read our Cookie Policy for a more detailed description and click on the settings button to customize how the site uses cookies for you.

Close
Accept Cookies
Cookie Settings