Iconography

Guidelines and Design Principles

The modernized Kendo icon set includes over 860 icons available in three variations—outline (default), solid, and duotone. It is aligned with the Phosphor icon library, designed to be intuitive and minimalistic, capturing the essence of each shape.  

The icon set supports the core goal of the Telerik and Kendo UI design language—to be simple and user-friendly. These icons can be used to represent objects and highlight key elements. 

To create custom icons that remain consistent with the provided component styles, follow the guidelines outlined in this article. 

Grid and Proportion

The UI components icons system is optimized for maximum legibility at a font size of 16 pixels (the default icon size used across Kendo components): 

• The system uses a 32 x 32 pixel canvas. This canvas is based on a 2-pixel grid base. 
• Gridlines are placed every 2 pixels, creating 16 units, each measuring 2 x 2 pixels. As a result, 1 unit on a 32 x 32 pixel canvas corresponds to 2 pixels on a 16 x 16 pixel canvas. 

1:1

1:0.75

Layout

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

• Most icons are constructed within a live area of 13 x 13 units (26 x 26 pixels), surrounded by a trim area of 1.5 units (3 pixels). 

• For highly detailed icons, the trim area may be reduced to 1 unit (2 pixels). 
• A minimum spacing of 2 pixels between distinct elements is recommended to ensure clarity and proper visual separation. 
• When adding new icons, maintain consistent proportions by using the same scale as existing icons. 

Position

Always position icon paths optically, adjusting for geometric imbalances so that asymmetric or baseline-heavy shapes appear visually centered. A purely mathematical alignment may not achieve this effect.

Geometry

The UI components icon system relies on geometric shapes to maintain visual balance with typography. A limited set of simple, universal elements ensures consistency and clarity, while also defining the placement of glyphs within the icon grid.

Style

Icon shapes prioritize clarity, minimalism, and geometric consistency, ensuring readability at both small and large sizes. Familiar visual metaphors are used to support quick recognition.

• Details are simplified and non-essential lines (such as internal document lines) should be avoided to preserve clarity. 
• Strokes are always center-aligned to prevent distortion when scaling down.
• A constant corner radius of 2 pixels is applied to all outer geometric shapes. 
• Round caps are used for open paths and line endings. 
• Round joins are used for intersecting lines and corners. 

• The default stroke width is set to 2 pixels on the 32 x 32 pixel artboard, which scales down to 1 pixel at 16 x 16 pixel artboard. 

Variations

The new icon set includes three variations—outline (default), solid, and duotone. Icon construction varies by style, ensuring consistent visual weight, clarity, and recognizability across all variations. 

Outline Icons

Outline icons have a lighter visual weight and are the primary standard for resting states. They use open, center-aligned paths with stroke-based rendering.

Duotone Icons

Duotone icons add subtle depth and are primarily used for visual emphasis or lightweight illustrative elements. 

They consist of two layers: 

• A foreground stroke layer 
• A background filled shape set to 20% opacity of the primary color 

Solid Icons

Solid icons convey a message of prominence, enhance overall accessibility, and offer high contrast due to their heavier visual weight. When paired with outline icons, solid icons indicate active or toggle states, selections, or key emphasis points. The Kendo icon set follows two construction patterns that aim to preserve legibility and the icon’s distinctive characteristics.

Pattern 1: Partially Filled Shape

This pattern is used for structured or complex objects (e.g., plane, hand, heart, lock): 

• The main outer form or a key internal selection is a filled silhouette;
• Secondary elements remain as cutouts or stroked lines; 
• The filled portion uses a closed path, while strokes are layered above using center-aligned paths. 

Pattern 2: The Scaled-Down Shape with Solid Background 

Used for abstract or open symbols (e.g., arrow, checkmark, plus). 

• A solid geometric container (circle or rectangle) is placed behind the symbol; 
• The symbol is scaled down by approximately 10 – 15% to maintain optical balance; 
• The symbol is subtracted from the container using boolean operations; 
• The resulting stroke weight remains consistent with outline and duotone icons. 

Modifiers

Some of the Kendo icons require additional symbols to convey meaning. Modifiers are secondary visual elements (such as a pencil, gear, or plus sign) that indicate actions, states, or editability. 

They always remain secondary to the main symbol and may introduce subtle stylistic differences (such as fill or color) to ensure clear distinction. 

Modifiers share the same stroke width as the primary icons. 

In the updated Kendo icon set, modifiers follow these rules: 

Position

• Typically anchored to the bottom-right corner of the icon grid; 

• May shift to the top-right corner if needed to avoid crowding; 

• Generally, avoid the left side unless necessary for balance; 

• Abstract or open-path modifiers are placed within the icon; 

• Wider modifiers are positioned below the main symbol. 

Negative Space

• Maintain consistent spacing between the base icon and modifier to prevent overlap when scaling; 
• Spacing should match the primary stroke width for consistency and clarity. 

Visual Scale Reduction

• Modifiers must remain visually secondary; 
• They are scaled to approximately 30-40% of the main canvas. 

Key Principles

To keep the icon set consistent, follow these key principles:

• Maintain consistency across all icon types and sizes;
• Use geometric construction to align with typography;
• Prioritize clarity and legibility over detail;
• Apply icon styles intentionally to reflect UI states.

Export

Icons should be exported at 24 x 24 pixels and according to their variations they should contain different number and types of paths as follows:

• Outline icons should be exported as editable single path supporting stroke width property;
• Solid icons should be exported as a single path non-editable object;
• Duotone icons should be exported as editable single path for their solid, primary parts and single non-editable path for their semi-transparent or tinted secondary parts.