Visual Adjustments for Icons
You can visually enhance the font and SVG icons by:
- Changing the icon's size.
- Applying a different color.
- Flipping and rotating the icon.
Size
You can scale icons by setting the size configuration option.
The default size of all Telerik and Kendo UI icons is 16 px (font-size: 16 px; width: 16 px; height: 16 px). However, Kendo UI provides several predefined sizes that are described in the table below. To set each of these sizes, use the respective CSS class.
You can also apply any size to the font icons by using the CSS font-size property. Similarly, to adjust the size of the SVG icons, use the width and height CSS property.
| Predefined Size | Font Size | Width | Height | CSS Class |
|---|---|---|---|---|
| xsmall | 12 px | 12 px | 12 px | k-icon-xs |
| small | 14 px | 14 px | 14 px | k-icon-sm |
| medium | 16 px | 16 px | 16 px | k-icon-md |
| large | 20 px | 20 px | 20 px | k-icon-lg |
| xlarge | 24 px | 24 px | 24 px | k-icon-xl |
| xxlarge | 32 px | 32 px | 32 px | k-icon-xxl |
| xxxlarge | 48 px | 48 px | 48 px | k-icon-xxxl |
Colors
The Telerik and Kendo UI theme provides predefined colors listed in the table below. To set each of these colors, use the respective CSS class.
| Color | CSS Class | Description |
|---|---|---|
| primary | k-color-primary | Applies coloring based on the primary theme color. |
| secondary | k-color-secondary | Applies coloring based on the secondary theme color. |
| tertiary | k-color-tertiary | Applies coloring based on the tertiary theme color. |
| info | k-color-info | Applies coloring based on the info theme color. |
| success | k-color-success | Applies coloring based on the success theme color. |
| warning | k-color-warning | Applies coloring based on the warning theme color. |
| error | k-color-error | Applies coloring based on the error theme color. |
| dark | k-color-dark | Applies coloring based on the dark theme color. |
| light | k-color-light | Applies coloring based on the light theme color. |
| inverse | k-color-inverse | Applies coloring based on the inverse theme color. |
Flipping and Rotating
To better accommodate the icons in your application, you can flip and rotate them with the help of predefined CSS classes:
| CSS Class | Description |
|---|---|
k-flip-h | Flips an icon horizontally. |
k-flip-v | Flips an icon vertically. |
k-flip-h k-flip-v | Flips an icon both horizontally and vertically. |
k-rotate-0 | Rotates an icon 0°. |
k-rotate-45 | Rotates an icon 45°. |
k-rotate-90 | Rotates an icon 90°. |
k-rotate-135 | Rotates an icon 135°. |
k-rotate-180 | Rotates an icon 180°. |
k-rotate-225 | Rotates an icon 225°. |
k-rotate-270 | Rotates an icon 270°. |
k-rotate-315 | Rotates an icon 315°. |
