---
title: Visual Adjustments
path: foundation/iconography/visual-adjustments
position: 5
seo_title: Visual Adjustments for Icons
seo_description: Learn what are the visual adjustments that you can apply to the
  font and SVG icons in the Telerik and Kendo UI Design System. Learn what are
  the predefined icon sizes and colors and how to flip and rotate an icon.
---

## Visual Adjustments for Icons

You can visually enhance the font and SVG icons by:

- Changing the icon's [size](#size).
- Applying a different [color](#colors).
- [Flipping and rotating](#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°.                           |