Iconography

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.

DoKeep the consistency of the fill mode within the icons sets.

Don'tAvoid mixing different fill mode styles in a single icon set

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.

DoThe icon and the textual content within a component must be vertically aligned and centered.

Don'tAvoid aligning the bottom of the icon with the baseline of the text.

Creating New Icons

An icon set consists of multiple icons that stem from the same base graphic. To create new icons for the icon set, you add or remove elements from the base graphic.

DoIcons of the same type must have the same proportions and ratios—this makes them look consistent when placed next to each other.

Don'tAvoid 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.