Icon

Check Open Iconic for all available icons.

<span class="k-icon-plus" aria-hidden="true"></span>

<span class="k-icon-pencil" aria-hidden="true"></span>

<span class="k-icon-trash" aria-hidden="true"></span>

Custom icons

We’ve added a couple of custom icons on top of Open Iconic

<span class="k-icon-close" aria-hidden="true"></span>

<span class="k-icon-disabled" aria-hidden="true"></span>

<span class="k-icon-document-archive" aria-hidden="true"></span>

<span class="k-icon-document-audio" aria-hidden="true"></span>

<span class="k-icon-document-default" aria-hidden="true"></span>

<span class="k-icon-document-document" aria-hidden="true"></span>

<span class="k-icon-document-folder" aria-hidden="true"></span>

<span class="k-icon-document-image" aria-hidden="true"></span>

<span class="k-icon-document-pdf" aria-hidden="true"></span>

<span class="k-icon-document-spreadsheet" aria-hidden="true"></span>

<span class="k-icon-document-video" aria-hidden="true"></span>

<span class="k-icon-documents" aria-hidden="true"></span>

<span class="k-icon-enabled" aria-hidden="true"></span>

<span class="k-icon-filter" aria-hidden="true"></span>

<span class="k-icon-folder-opened" aria-hidden="true"></span>

<span class="k-icon-folder-closed" aria-hidden="true"></span>

<span class="k-icon-menu-opened" aria-hidden="true"></span>

<span class="k-icon-menu-closed" aria-hidden="true"></span>

<span class="k-icon-open" aria-hidden="true"></span>

Colors

  • Give your icons more meaning by giving them a color
  • Remember that assistive technologies such as screen readers don’t see any colors. Make sure you add textual content as well using the k-visually-hidden class
<span class="k-icon-home k-icon--accent" aria-hidden="true"></span>

<span class="k-icon-home k-icon--success" aria-hidden="true"></span>

<span class="k-icon-home k-icon--error" aria-hidden="true"></span>

Sizes

<span class="k-icon-home k-icon--size-tiny" aria-hidden="true"></span>

<span class="k-icon-home k-icon--size-small" aria-hidden="true"></span>

<span class="k-icon-home k-icon--size-default" aria-hidden="true"></span>

<span class="k-icon-home k-icon--size-medium" aria-hidden="true"></span>

<span class="k-icon-home k-icon--size-large" aria-hidden="true"></span>

<span class="k-icon-home k-icon--size-xlarge" aria-hidden="true"></span>

<span class="k-icon-home k-icon--size-huge" aria-hidden="true"></span>

Assistive technologies

It is always a good idea to accompany an icon with a textual partner

<button class="k-button k-button--default" type="button">
    <span class="k-visually-hidden">Home icon</span>
    <span class="k-icon-home" aria-hidden="true"></span>
</button>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.