umbraco-icons

Register custom SVG icons in the Umbraco backoffice via manifest files and JavaScript modules.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-icons
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-icons
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-icons
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement custom icons within the Umbraco backoffice, enhancing the visual consistency and branding of extensions.

Core Features & Use Cases

  • Custom Icon Registration: Register new SVG icons through the Umbraco manifest.
  • SVG Content Integration: Define icons using SVG content exported from JavaScript modules.
  • Use Case: A developer needs to add a unique icon for a new custom content app in the Umbraco backoffice to visually distinguish it from standard Umbraco elements.

Quick Start

Use the umbraco-icons skill to register a new custom SVG icon named 'my-custom-icon' following the official documentation.

Frequently Asked Questions about umbraco-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add custom SVG icons to the Umbraco backoffice?

You register custom SVG icons in the Umbraco backoffice by defining them through manifest files and JavaScript modules. This enables unique visual elements for your custom extensions.

What is the process for registering custom icons in Umbraco extensions?

Registering custom icons in Umbraco involves utilizing the extension API to define icons via manifests. You integrate SVG content exported from JavaScript modules to implement the visual elements.

Do I need JavaScript modules to define SVG icons in Umbraco?

Yes, defining SVG icons in Umbraco requires using JavaScript modules to export the SVG content. The system relies on these modules alongside manifest files to register and implement the custom icons.

Can I use custom SVG icons for Umbraco content apps?

Yes, you can use custom SVG icons for Umbraco content apps to visually distinguish them from standard elements. This enhances the visual consistency and branding of your custom backoffice extensions.

Are there limitations when defining custom icons via the Umbraco extension API?

The primary limitation when defining custom icons is the strict requirement to adhere to Umbraco's extension API. You must properly structure your manifest files and JavaScript modules for the icons to function.