# Custom SVG Icons

The SvgIcon component allows you to display custom SVG icons (not available in the KendoReact default icons set). You can provide the inner SVG elements as [`children`](https://www.telerik.com/kendo-react-ui/components/common/api/svgiconprops) to the SvgIcon. SVG element has default viewBox set to `0 0 24 24`. This can be customized with the [`viewBox`](https://www.telerik.com/kendo-react-ui/components/common/api/svgiconprops#viewBox) property.

Custom SVG icons also allow setting all predefined appearance options such as different sizes, theme colors and flipping.

> caution Security: The entire SVGIcon object passed to the [`icon`](https://www.telerik.com/kendo-react-ui/components/common/api/svgiconprops#icon) prop is rendered as raw SVG markup without sanitization. This includes its `content` property and every entry in `variants` selected through the [`variant`](https://www.telerik.com/kendo-react-ui/components/common/api/svgiconprops#variant) prop. Use only icon objects from a trusted source, such as `@progress/kendo-svg-icons`, or SVG markup that you author and control. Never pass user-supplied or otherwise untrusted content through `icon`, because malicious SVG markup can enable cross-site scripting.

The following example demonstrates how to use custom SVG icons.

[Demo Source](https://demos.telerik.com/kendo-react-ui/common/svg-icon/custom/func/source.txt)

## Built-in SVG Icons customization

Using the `IconsContext.Provider` you can also customize the SVG icons which are already embedded into the components. In the example below you can see how to replace the arrow icon of the SplitButton component with:

* an icon from the *@progress/kendo-svg-icons* package
* a custom SVG object
* a FontAwesome icon

[Demo Source](https://demos.telerik.com/kendo-react-ui/common/svg-icon/built-in-icons/source.txt)

## Suggested Links

* [API Reference of the SvgIcon](https://www.telerik.com/kendo-react-ui/components/common/api/svgicon)
* [API Reference of the SvgIconProps](https://www.telerik.com/kendo-react-ui/components/common/api/svgiconprops)