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

Custom SVG Icon

Updated on Jan 22, 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 following example demonstrates how to use custom SVG icons.

Change Theme

Theme

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.
typescript
```
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.

typescript

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