This handles custom icon registration in Umbraco's backoffice using the official extension system. You'd use it when building Umbraco packages that need branded or custom SVG icons beyond the default set. It pulls fresh documentation before generating code, which matters since Umbraco's extension API changes between versions. The workflow is straightforward: it fetches the latest docs, asks what icons you need, then generates the manifest and TypeScript files with proper lazy loading. The source includes references to working examples in the Umbraco CMS repo, so you're not guessing at patterns. Good for package authors who want icons that match their brand without digging through backoffice documentation.

skills.sh installs
397
GitHub stars
27
last updated
Aug 21, 2026

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-icons --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco Icons

What is it?

Icons are custom visual elements that extension authors can register for use throughout the Umbraco backoffice. Custom icons are registered through the manifest and can then be used in any extension that accepts an icon property. Icons are defined as SVG content exported from JavaScript modules.

Documentation

Always fetch the latest docs before implementing:

Reference Example

The Umbraco source includes a working example:

Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/icons/

This example demonstrates how to register and use custom SVG icons. Study this for production patterns.

Workflow

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What icons needed? SVG source available?

Sponsors

Details

Repository
github.com/umbraco/umbraco-cms-backoffice-skills
Categories
Documentation, .NET & C#
First seen
Jun 3, 2026

More from umbraco/umbraco-cms-backoffice-skills

All 76
1umbraco avatarumbraco-sectionsumbraco/umbraco-cms-backoffice-skillsImplement sections in Umbraco backoffice using official docs397skills.sh installs
2jezweb avatarsub-agent-patternsjezweb/claude-skillsComprehensive guide to sub-agents in Claude Code: built-in agents (Explore, Plan, general-purpose), custom agent creation, configuration, and delegation pattern396skills.sh installs
3umbraco avatarumbraco-bundleumbraco/umbraco-cms-backoffice-skillsImplement bundles in Umbraco backoffice using official docs396skills.sh installs
4davila7 avatarmcp-builderdavila7/claude-code-templatesGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when b395skills.sh installs
5umbraco avatarumbraco-kindsumbraco/umbraco-cms-backoffice-skillsImplement kinds in Umbraco backoffice using official docs395skills.sh installs
6umbraco avatarumbraco-menuumbraco/umbraco-cms-backoffice-skillsImplement menus in Umbraco backoffice using official docs394skills.sh installs