# Kendo React Icon

> Searches for icons in the KendoReact icon library. Use when the user needs an icon for a specific action, concept, or UI element, or asks about available icons. Trigger on "find icon", "what icon", "icon for", "search icons", "Kendo icons", "SVG icon", "icon library", or when implementing icon-only buttons, decorative icons, or navigation icons.

- Skill: `telerik/kendo-react-icon` (Agent Skill)
- Install (CLI): `npx skillmds@latest add telerik/kendo-react-icon`
- Raw SKILL.md: https://api.skillmd.com/api/skills/telerik/kendo-react-icon/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: telerik (https://skillmd.com/u/telerik)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/telerik/kendo-react-icon

---


## KendoReact — Icon Assistant

### 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:

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

```tsx
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:

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

```tsx
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`:

| Purpose | Import name |
|---|---|
| Add/create | `plusIcon` |
| Remove | `minusIcon` |
| Edit | `pencilIcon` |
| Delete | `trashIcon` |
| Save | `saveIcon` |
| Search | `searchIcon` |
| Filter | `filterIcon` |
| Sort ascending | `sortAscIcon` |
| Sort descending | `sortDescIcon` |
| Navigate up/down/left/right | `chevronUpIcon`, `chevronDownIcon`, `chevronLeftIcon`, `chevronRightIcon` |
| Confirm | `checkIcon` |
| Cancel | `xIcon` |