# Appearance

The SVGIcon 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/components/styling/icons#icon-package-compatibility) section.

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

## Configurator demo

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

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

## Theme Color

In terms of the current theme, you can apply predefined theme colors to the SVGIcon by using the [`themeColor`](https://www.telerik.com/kendo-vue-ui/components/icons/api/svgiconprops#themecolor) property. To apply custom colors to the SVGIcon, 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/svg-icons/appearance/theme-color/source.txt)

## Size

You can apply predefined size options to the SVGIcon by using the [`size`](https://www.telerik.com/kendo-vue-ui/components/icons/api/svgiconprops#size) property. To apply custom sizes to the SVGIcon, 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/svg-icons/appearance/size/source.txt)

## Orientation

The SVGIcon allows you to invert it through an axis in different directions by using the [`flip`](https://www.telerik.com/kendo-vue-ui/components/icons/api/svgiconprops#flip) 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/svg-icons/appearance/orientation/source.txt)

## Variant

> Using the `variant` property requires `@progress/kendo-svg-icons` version `5.0.0` or later, as icon variant data is only available starting from that version.

You can render the SVGIcon component in different visual styles by using the `variant` property. The available values are `solid`, `outline`, and `duotone`.

When a variant is specified, the component uses the `variants` property of the [`SVGIcon`](https://www.telerik.com/kendo-vue-ui/components/icons/api/svgiconprops) object to render the corresponding path. If the requested variant is not present on the icon, the component falls back to the default `content` path.

The following example demonstrates the available `variant` values.

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

## Suggested Links

* [API Reference of the SVGIcon](https://www.telerik.com/kendo-vue-ui/components/icons/api/svgiconprops)
* [SVGIcon List](https://www.telerik.com/kendo-vue-ui/components/icons/svgicon/svgicon-list)