# Appearance

The Icon provides various styling options that are related to its appearance.

> Kendo UI Icons version `^5.x.x` requires Kendo UI for Vue `v9.0.0` or later. For more information, refer to the [Icon Package Compatibility](https://www.telerik.com/kendo-vue-ui-develop/components/styling/icons#icon-package-compatibility) section.

* [Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon/appearance#configurator-demo)
* [Theme Color](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon/appearance#theme-color)
* [Size](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon/appearance#size)
* [Orientation](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon/appearance#orientation)

## Configurator demo

The following example demonstrates configuring the different aspects of the Icon appearance through a configurator.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/icons/font-icons/appearance/configurator/source.txt)

## Theme Color

In terms of the current theme, you can apply predefined theme colors to the Icon by using the [`themeColor`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/iconthemecolor) property. To apply custom colors to the Icon, style it with CSS.

The available `themeColor` values are:

* `inherit` (Default)—Applies coloring based on the current color.
* `primary`—Applies coloring based on the primary theme color.
* `secondary`—Applies coloring based on the secondary theme color.
* `tertiary`— Applies coloring based on the tertiary theme color.
* `info`—Applies coloring based on the information theme color.
* `success`— Applies coloring based on the success theme color.
* `warning`— Applies coloring based on the warning theme color.
* `error`— Applies coloring based on the error theme color.
* `inverse`— Applies coloring based on the inverse theme color.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/icons/font-icons/appearance/theme-color/source.txt)

## Size

You can apply predefined size options to the Icon by using the [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/iconsize) property. To apply custom sizes to the Icon, style it with CSS.

The available `size` values are:

* `default` (Default)—Font-size: 16px; Width: 16px; Height: 16px.
* `xsmall`—Font-size: 8px; Width: 8px; Height: 8px.
* `small`—Font-size: 12px; Width: 12px; Height: 12px.
* `medium`—Font-size: 32px; Width: 32px; Height: 32px.
* `large`—Font-size: 48px; Width: 48px; Height: 48px.
* `xlarge`—Font-size: 64px; Width: 64px; Height: 64px.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/icons/font-icons/appearance/size/source.txt)

## Orientation

The Icon allows you to invert it through an axis in different directions by using the [`flip`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/iconflip) property.

The available `flip` values are:

* `default` (Default)—No flipping is applied.
* `horizontal`—Flips the icon in horizontal direction.
* `vertical`—Flips the icon in vertical direction.
* `both`—Flips the icon in both horizontal and vertical directions.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/icons/font-icons/appearance/orientation/source.txt)

## Suggested Links

* [API Reference of the Icon](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/fonticonprops)
* [Icon List](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon/icon-list)