All Components

Web Font Icons

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

Overview

You can directly use the web font icons in your project by assigning any of the predefined CSS classes from the list of font icons below, as demonstrated in the following example.

List of Font Icons

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
In this article