New to Kendo UI for Angular? Start a free 30-day trial

Custom SVG Icon

Updated on Sep 30, 2026

While the Kendo UI for Angular suite provides a comprehensive library of over 500 built-in SVG icons, you might want to create and use your own custom SVG icons in your application.

The SVGIcon component allows you to define and display custom SVG icons. This can be achieved by passing a custom SVGIcon object to the icon property of the kendo-svgicon component.

The entire SVGIcon object is rendered as trusted SVG markup and bypasses Angular's built-in HTML sanitization. This applies to the content property and to every entry in variants selected through the variant input. Pass only icon objects from a trusted source, such as the @progress/kendo-svg-icons package or SVG markup that you author and control. Never bind the icon or variant properties to user-supplied or otherwise untrusted content, because doing so can enable cross-site scripting.

The following example demonstrates how to use custom SVG icons.

Loading ...

Steps to Add a Custom SVG Icon

To add a custom SVG icon in Kendo UI for Angular components:

Define the SVGIcon in a TypeScript file with the desired name, content, and viewBox properties. The content property supports common SVG elements such as <path>, <circle>, <rect>, <polygon>, and others.
TS
```
export const customSVG = {
  name: "simple-icon",
  content: "<circle cx='12' cy='12' r='10'/><rect x='8' y='8' width='8' height='8'/>",
  viewBox: "0 0 24 24"
}
```

Import the custom SVG icon in the component TypeScript file.

import { car, customSVG, star } from "./custom-svg-icons";
import { SVGIcon } from '@progress/kendo-svg-icons';

export class AppComponent {
  public customSVG: SVGIcon = customSVG;
}

Use the icon in the component template.

html

<kendo-svgicon [icon]="customSVG"></kendo-svgicon>

Custom SVG Icon

Steps to Add a Custom SVG Icon

Suggested Links