Iconography

Style and Guidelines

The component icons delivered with the Telerik and Kendo UI themes are designed to be intuitive and minimalistic, to capture the essence of a shape. They contribute to the main purpose of the Telerik and Kendo UI design language—to be simple and user-friendly. You can use these icons to represent any object and to highlight an element.

To add your own icons that are consistent with the style of the delivered component icons, follow the guidelines in this article.

Grid and Proportion

The UI components icons system is optimized for maximum legibility in a font size of 16 pixels:

• For pixel-perfect accuracy, the system uses a 512 x 512 pixel canvas to create the icons. This canvas size is a derivative of a 16-pixel grid base.
• The system uses a gridline on every 32 pixels. This creates 16 units, each 16 x 16 pixels. As a result, 1 unit on a 512 x 512 pixel canvas is equal to 1 pixel on a 16 x 16 pixel canvas.

1:1

1:32

Layout

The components icons system sets the following requirements for the layout of the icons:

• The icon's content on the canvas is limited to 14 x 14 units of live area. The live area is surrounded by 2 units of trim area. No part of the glyph is allowed to go outside the trim area.

• If the icon contains a lot of details, you can increase the live area to 16 x 16 units. This is an exception to the rule, and you must avoid it.
• When adding icons, be careful with their proportions. To look consistent, they must use the same scale as the already available glyphs.

Position

Always place the icon in the middle of the live area. If you cannot center the icon because of its specific shape, then align it to the top left corner of the live area.

Geometry

The UI components icon system integrates a preset of main diagonals and basic shapes like squares, circles, and rectangles. This small palette of universal and simple elements keeps the consistency and simplicity of the artwork and specifies the position of the glyph in the icon grid.

Style

The shape of the icons aims at clarity, minimalism, and geometry. It tries to improve readability on both small and large sizes. To ease the users’ perceptions, the shapes utilize well-known metaphors.

The following characteristics are specific to the components icon system:

• The Icons are flat and graphic to match the brand's look and feel.
• The geometric shapes are pure—straight lines and circles. Organic shapes aren't utilized.
• All lines must be either vertical, horizontal, or at a 45-degree angle, relating to symbol angles.

• The main stroke width is 1 px for a size of 16 px. This stroke is applied for curve zones, circles, angles, and negative spaces.
• Although the default fill style is solid, some of the icons have outlined versions. Avoid mixing both styles as it leads to inconsistency.

Export

Before exporting them, unify all icon shapes into a single path. Otherwise, the exported icon will not be converted correctly to a font icon and will not be visualized in all browsers. The required command is called Flatten selection in Figma and Make a Compound Path in Adobe Illustrator.

Usage

Depending on the use case, icons follow specific guidelines.

Rendering Modes

The Web Components Icons font offers some of its icons 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.

Multiple 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.