---
path: foundation/iconography/usage
title: Usage
position: 4
seo_title: Usage Guidelines for Component Icons
seo_description: Learn how to use the fill and outline modes of the Web Components Icons font, how to align labels with icons, and what to watch for when creating new icons.
---

## Usage

The component icons for the Telerik and Kendo UI themes require you to follow some basic principles that make your design user-friendly and effective.

### Rendering Modes

The Web Components Icons font offers some of its icon sets in both fill and outline modes.

<DosDonts>
<Do description="Keep the consistency of the fill mode within the icons sets.">![An icon set using the proper and recommended fill mode in the Telerik and Kendo UI icon context.](images/foundation-iconography-usage-consistency-do.png "Correctly used fill mode within an icons set in the Telerik and Kendo UI components icons system.")</Do>
<Dont description="Avoid mixing different fill mode styles in a single icon set">![An image rendering different fill modes for a single icon set in the Telerik and Kendo UI icon context.](images/foundation-iconography-usage-consistency-dont.png "Do not mix different fill mode styles within a single icon set as recommended by the Telerik and Kendo UI components icons system.")</Dont>
</DosDonts>

### Icons and Labels

Usually, icons are used in a combination with label text. The vertical rhythm is essential for the easier perception of the elements.

<DosDonts>
<Do description="The icon and the textual content within a component must be vertically aligned and centered.">![An image displaying vertically aligned and centered icon and textual content as recommended in the Telerik and Kendo UI context.](images/foundation-iconography-usage-fill-mode-do.png "Correct vertical alignment of an icon and text label in the Telerik and Kendo UI Web Components Icons")</Do>
<Dont description="Avoid aligning the bottom of the icon with the baseline of the text.">![Do not align the icon with the baseline of the text in the Telerik and Kendo UI context.](images/foundation-iconography-usage-fill-mode-dont.png "Telerik and Kendo UI components icons guidelines: avoid aligning the icon with the baseline of the text.")</Dont>
</DosDonts>

### Creating New Icons

An icon set consists of multiple icons that stem from the same base graphic. To [create new icons](/foundation/iconography/styles-and-guidelines) for the icon set, you add or remove elements from the base graphic.

<DosDonts>
<Do description="Icons of the same type must have the same proportions and ratios—this makes them look consistent when placed next to each other.">![Use the same icon proportions and ratios for consistency in the Telerik and Kendo UI context.](images/foundation-iconography-usage-proportion-do.png "Icons of the same type keep their proportions and rations the same in the Telerik and Kendo UI Web Components Icons system")</Do>
<Dont description="Avoid changing the scaling when making icon variations for an icon set. When placed next to each other or when used as a togglable option, icons must not have a different size.">![Do not scale icons in the same icon set in the Telerik and Kendo UI context.](images/foundation-iconography-usage-proportion-dont.png "Incorrect scaling of icons in the same icon set must be avoided according to the Telerik and Kendo UI Web Components Icons system")</Dont>
</DosDonts>