Kendo React Icon

KendoReact — Icon Assistant

Progressive Disclosure

This skill owns the full icon lookup policy. Do not read additional reference files for icons. Make one kendo_icon_assistant call that covers all requested icon slots in the current request or follow-up notes. Set limit based on slot count: 1-3 slots -> 0.3, 4-8 slots -> 0.5, 9+ slots -> 1.0.

Calling the Icon Assistant

Use the kendo_icon_assistant MCP tool to search for icons by name, purpose, or keyword.

Tool call:

kendo_icon_assistant({
    query="<Description of the icon purpose or keyword>",
    limit=0.3  // Adjust based on expected count: 0.1 for ~1 icon, 0.3 for a few icons, 1.0 for many
})

Examples:

kendo_icon_assistant({
    query="save document",
    limit=0.3
})

kendo_icon_assistant({
    query="user profile avatar account",
    limit=0.3
})

kendo_icon_assistant({
    query="navigation arrow chevron",
    limit=0.5
})

Using Icons in React

Prioritize SVG icons over font icons.

SVG Icons (Recommended)

Ensure the required packages are installed:

npm install @progress/kendo-svg-icons @progress/kendo-react-common

import { SvgIcon } from "@progress/kendo-react-common";
import { paperclipIcon } from "@progress/kendo-svg-icons";

function App() {
  return (
    <SvgIcon icon={paperclipIcon} />
  );
}

Icon names returned by the tool are in camelCase with an Icon suffix (e.g., paperclipIcon, chevronDownIcon). Use them directly as imports from @progress/kendo-svg-icons.

You can also call kendo_component_assistant for the SvgIcon component for full API reference and docs.

Font Icons (Fallback)

If SVG is not an option, add the font icons CSS reference:

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />

import { Icon } from "@progress/kendo-react-common";

function App() {
  return (
    <Icon name="paperclip" />
  );
}

You can call kendo_component_assistant for the Icon component for font icon API reference.

Common Icon Reference

Frequently used icons from @progress/kendo-svg-icons: