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
    <span class="k-icon k-i-copy"></span>

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

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

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

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.

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

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

<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

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

Alerts and Notifications

  • .k-i-notification
    .k-i-bell
  • .k-i-information
    .k-i-info
  • .k-i-question
    .k-i-help
  • .k-i-warning
    .k-i-exception
    .k-i-error

Editing

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

Files and Folders

  • .k-i-folder
  • .k-i-folder-open
  • .k-i-folder-add
  • .k-i-folder-up
  • .k-i-folder-more
    .k-i-fields-more
  • .k-i-aggregate-fields
  • .k-i-file
    .k-i-file-vertical
  • .k-i-file-add
  • .k-i-file-txt
    .k-i-txt
  • .k-i-file-csv
    .k-i-csv
  • .k-i-file-excel
    .k-i-file-xls
    .k-i-excel
    .k-i-xls
  • .k-i-file-word
    .k-i-file-doc
    .k-i-word
    .k-i-doc
  • .k-i-file-mdb
    .k-i-mdb
  • .k-i-file-ppt
    .k-i-ppt
  • .k-i-file-pdf
    .k-i-pdf
  • .k-i-file-psd
    .k-i-psd
  • .k-i-file-flash
    .k-i-flash
  • .k-i-file-config
    .k-i-config
  • .k-i-file-ascx
    .k-i-ascx
  • .k-i-file-bac
    .k-i-bac
  • .k-i-file-zip
    .k-i-zip
  • .k-i-film
  • .k-i-css3
  • .k-i-html5
  • .k-i-html
    .k-i-source-code
    .k-i-view-source
  • .k-i-css
  • .k-i-js
  • .k-i-exe
  • .k-i-csproj
  • .k-i-vbproj
  • .k-i-cs
  • .k-i-vb
  • .k-i-sln
  • .k-i-cloud
  • .k-i-file-horizontal

Images

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

Layout and Navigation

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

Mapping

  • .k-i-globe-outline
  • .k-i-globe
  • .k-i-marker-pin
  • .k-i-marker-pin-target
  • .k-i-pin
  • .k-i-unpin

Media

  • .k-i-play
  • .k-i-pause
  • .k-i-stop
  • .k-i-rewind
  • .k-i-forward
  • .k-i-volume-down
  • .k-i-volume-up
  • .k-i-volume-off
  • .k-i-hd
  • .k-i-subtitles
  • .k-i-playlist
  • .k-i-audio

Social Sharing

  • .k-i-share
  • .k-i-user
  • .k-i-inbox
  • .k-i-blogger
  • .k-i-blogger-box
  • .k-i-delicious
  • .k-i-delicious-box
  • .k-i-digg
  • .k-i-digg-box
  • .k-i-email
    .k-i-envelop
    .k-i-letter
  • .k-i-email-box
    .k-i-envelop-box
    .k-i-letter-box
  • .k-i-facebook
  • .k-i-facebook-box
  • .k-i-google
  • .k-i-google-box
  • .k-i-google-plus
  • .k-i-google-plus-box
  • .k-i-linkedin
  • .k-i-linkedin-box
  • .k-i-myspace
  • .k-i-myspace-box
  • .k-i-pinterest
  • .k-i-pinterest-box
  • .k-i-reddit
  • .k-i-reddit-box
  • .k-i-stumble-upon
  • .k-i-stumble-upon-box
  • .k-i-tell-a-friend
  • .k-i-tell-a-friend-box
  • .k-i-tumblr
  • .k-i-tumblr-box
  • .k-i-twitter
  • .k-i-twitter-box
  • .k-i-yammer
  • .k-i-yammer-box
  • .k-i-behance
  • .k-i-behance-box
  • .k-i-dribbble
  • .k-i-dribbble-box
  • .k-i-rss
  • .k-i-rss-box
  • .k-i-vimeo
  • .k-i-vimeo-box
  • .k-i-youtube
  • .k-i-youtube-box

Toggle

  • .k-i-heart-outline
    .k-i-fav-outline
    .k-i-favorite-outline
  • .k-i-heart
    .k-i-fav
    .k-i-favorite
  • .k-i-star-outline
    .k-i-bookmark-outline
  • .k-i-star
    .k-i-bookmark
  • .k-i-checkbox
    .k-i-shape-rect
  • .k-i-checkbox-checked
  • .k-i-tri-state-indeterminate
  • .k-i-tri-state-null
  • .k-i-circle
  • .k-i-radiobutton
    .k-i-shape-circle
  • .k-i-radiobutton-checked

See Also

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