# Appearance The SVGIcon provides various styling options that are related to its appearance. > Kendo UI Icons version `^5.x.x` requires Kendo UI for Angular `v24.0.0` or later. For more information, refer to the [Icon Package Compatibility](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icon-package-compatibility) section. ## 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-angular-ui/components/icons/api/iconthemecolor) property. To apply custom colors to the SVGIcon, style it with CSS. The following example demonstrates the available `themeColor` values and custom color options. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/icons/svg-icon/appearance/theme-color/source.txt) ## Size You can apply predefined size options to the SVGIcon by using the [`size`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconsize) property. To apply custom sizes to the SVGIcon, style it with CSS. The following example demonstrates the available `size` values and custom size options. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/icons/svg-icon/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-angular-ui/components/icons/api/iconflip) property. The following example demonstrates the available `flip` values. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/icons/svg-icon/appearance/flip/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`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent#variant) property. The available values are `solid`, `outline`, and `duotone`. When a variant is specified, the component uses the [`variants`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon#variants) property of the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) object to render the corresponding path. If the requested variant is not present on the icon, the component falls back to the default [`content`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon#content) path. The following example demonstrates the available `variant` values. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/icons/svg-icon/appearance/variant/source.txt) ## Rotation You can rotate the SVGIcon at predefined angles by setting the [`rotate`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent#rotate) property to an [`IconRotate`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconrotate) value. When both [`flip`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconflip) and `rotate` are set, the `flip` direction takes precedence. The following example demonstrates all available `rotate` values applied to an arrow icon. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/icons/svg-icon/appearance/rotation/source.txt) ## Runtime Customization Use CSS custom properties to customize SVG icon size, color, rotation, and stroke width at runtime. Apply the variables to the `kendo-svg-icon` element or `.k-svg-icon` CSS class. To limit styles to one UI area, combine a container selector with an icon selector. For the complete reference, see the [SVG icon runtime customization documentation](https://www.telerik.com/design-system/docs/foundation/iconography/svg-icons/#runtime-customization). ### Icon Variables Use the following CSS variables to customize SVG icons:
CSS variable Description
--kendo-icon-size Sets the base icon size globally.
--kendo-icon-size-{size} Sets the size for a predefined icon size.
--kendo-icon-color Sets the fill and stroke color of an icon.
--kendo-icon-rotation Sets the rotation angle of an icon.
--kendo-icon-stroke-width Sets the stroke width of Outline and Duotone icon variants. This variable applies only to icons with the k-svg-icon-outline or k-svg-icon-duotone CSS class.
Set `--kendo-icon-size` on `:root` to change the base size globally. To set the size of one icon or one UI area, use the matching size-specific variable. For example, default icons use `--kendo-icon-size-md`, and icons with `size="large"` use `--kendo-icon-size-lg`. > note Depending on your theme configuration and stylesheet load order, you might need to add `!important` to the global `--kendo-icon-size` declaration to override the theme value. Use the following CSS to customize SVG icons in either a global or component stylesheet: ```css kendo-svgicon { --kendo-icon-size-md: 24px; --kendo-icon-color: #ff6358; --kendo-icon-rotation: 45deg; --kendo-icon-stroke-width: 2; } ``` ### Scoped Icon Styles To customize SVG icons in one area of your application, combine a container selector with the `kendo-svg-icon` selector. This overrides the variables that the icon defines by default. The following CSS applies a consistent size and theme color to SVG icons in a toolbar: ```css .toolbar-actions kendo-svgicon { --kendo-icon-size-md: 20px; --kendo-icon-color: var(--kendo-color-primary); } ``` ### Hover Effects To change the color or rotation of an SVG icon when a user hovers over it, set the `--kendo-icon-color` or `--kendo-icon-rotation` CSS variable. Target either the `kendo-svg-icon` element or the `.k-svg-icon` CSS class. The following CSS applies a custom color and rotation on hover: ```css kendo-svgicon:hover { --kendo-icon-color: #ff6358; --kendo-icon-rotation: 45deg; } ``` ## Suggested Links * [API Reference of the SVGIcon](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent) * [Icon Settings](https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings) * [SVGIcon List](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) * [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder)