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

Extending Kendo SVG Icons with Custom Ones

Updated on Dec 10, 2025

Description

Creating custom SVG icons and extending the existing Kendo UI for jQuery SVG icons library is a straightforward process. This KB article demonstrates how to add a custom SVG icon to the list of available icons in Kendo UI for jQuery library.

This KB article also answers the following questions:

How can I add a custom icon to the Kendo UI for jQuery Icon library?
What is the process for creating a custom SVG icon in Kendo UI for jQuery?
Can I extend the Kendo UI SVG icons with custom designs?

Environment

Product	Kendo UI for jQuery
Version	2024.4.1112

Solution

To create and use a custom SVG icon within the Kendo UI for jQuery, follow these steps:

Define the custom icon by specifying its name, content, and viewBox. The content should contain the SVG path data.

javascript

let myCustomIcon = {
    name: 'my-custom',
    content: '<path d="..."></path>', // Specify the SVG path data
    viewBox: '0 0 512 512' // Define the viewBox dimensions
};

Extend the kendo.ui.svgIcons object with the newly created custom icon.

javascript

    kendo.ui.svgIcons = $.extend({ myCustomIcon }, kendo.ui.svgIcons);

Reference the custom icon by its name (my-custom in this case).

Here is an example of how to use the custom icon in a Kendo Button:

    <button id="button" type="button">
      <span class="k-icon"></span> Inbox
    </button>

    <div id="toolbar"></div>

    <script>
      let myCustomIcon = {
        name: 'my-custom',
        content: '<path d="M448 32H64c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32M256 448c-106 0-192-86-192-192S150 64 256 64s192 86 192 192-86 192-192 192m28-164.8c-82.9 28.9-118.1 83.4-126.7 98.7 27.2 21.3 61.5 34.1 98.7 34.1 22.5 0 43.9-4.6 63.3-13-3.3-18.4-13.1-65.2-34.2-120.1-.4 0-.8.2-1.1.3m-95.5-172.3c-44.9 20.9-78.5 62.1-89 111.8 17.1-.1 78.6-1.7 147.6-20-24.3-43.2-50.3-80.1-58.6-91.8m79 146.8c2.1-.7 4.3-1.3 6.5-2-4.1-9.3-8.6-18.6-13.3-27.8-74.1 22.2-146.1 23.4-164.6 23.4 0 1.6-.1 3.1-.1 4.7 0 40.8 15.3 78 40.4 106.3 10.5-16.7 54.6-79.9 131.1-104.6m94.9-121.1C334.2 111.3 296.9 96 256 96c-12.4 0-24.5 1.4-36 4.1 8.7 11.9 34.9 48.8 58.8 92.7 50.7-19 76-46.7 83.6-56.2m-46.6 138.7C335 328 344 371.9 346.9 387.8c35.2-24.3 60.2-62.5 67.2-106.6-13.2-3.7-53.4-13.1-98.3-5.9m-24.4-58.1c3.8 7.8 7.5 15.8 10.9 23.8 1.2 2.8 2.4 5.7 3.5 8.5 48-6 95.7 1.8 110.2 4.5-.5-37.2-13.7-71.4-35.4-98.3-8.4 10-36.1 39.8-89.2 61.5"></path>',
        viewBox: '0 0 512 512'
      };
      kendo.ui.svgIcons = $.extend({ myCustomIcon }, kendo.ui.svgIcons)
      
      $("#button").kendoButton({
        icon: "my-custom"
      });

      $("#toolbar").kendoToolBar({
        items: [
          { type: "button", text: "foo", icon: "my-custom" },
          { type: "button", text: "bar", icon: "info-circle" }
        ]
      });
 </script>

Extending Kendo SVG Icons with Custom Ones

Description

Environment

Solution

See Also