How do I use icons from the Telerik UI Kit?

Telerik provides dozens of icons for use in your design files. In the past, we have used Font Awesome icons. These were used by adding the Font Awesome font to Figma, inserting a text item, and then selecting the appropriate glyph. Telerik icons work differently and are provided as vector graphics wrapped as a component.

How to Use Icons Outside of Telerik Components

There are two ways to insert an icon into your file:

Option 1 – Assets Panel

1. Open the Assets panel

2. Under the Telerik & KENDU UI section, expand the Icons category

3. Drag and drop your desired icon from the list

Open

Figure 1 – Assets panel with star icon component selected

Option 2 – Resources Search

1. Open Resources from the top bar

2. Ensure you are on the Components tab

3. Search for your desired icon

Open

Figure 2 – Resources search for star icon component

How to Use Icons within Telerik Components

1. Select the nested icon component layer

2. Swap the instance through the Component section of the Design panel

Known Issues

Blazor Icons - Telerik UI for Blazor is a great resource to see what icons are available for use. However, we have discovered that some of the icons are not named the same way within the UI kit. If you cannot find an icon you are looking for within the Figma library, please log the issue in the Telerik & KENDO UI Tracking Sheet or reach out via the MAACE Design Collab Meetup chat.