skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-icons

Register custom SVG icons in Umbraco backoffice extension manifests.

4|Updated Mar 6, 2026
Search Tags:#typescript#customization#icons#svg#umbraco#extension manifest#backoffice ui
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-icons-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-icons
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/extensions/umbraco-icons
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-icons-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps extension authors implement custom backoffice icons in Umbraco so their UI additions look consistent and brand-aligned without relying on built-in icon sets.

Core Features & Use Cases

  • Docs-first implementation: Guides you to fetch and follow the latest official Umbraco documentation for icons and extension registration.
  • Working registration workflow: Produces the manifest entry and an icons registry that exposes SVG modules to the Umbraco extension system.
  • Drop-in usage patterns: Explains how to reference the registered icon by name in other extension metadata and in HTML templates (umb-icon) to verify it renders correctly.

Quick Start

Ask the AI to generate an Umbraco icons manifest and TypeScript icon registry for a set of named SVG assets, following the latest official Umbraco docs, and explain exactly where to place the resulting files.

Frequently Asked Questions about umbraco-icons

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

FAQPage Schema
How do I register custom SVG icons in the Umbraco backoffice?▼

To register custom SVG icons in the Umbraco backoffice, you create an extension manifest entry and a TypeScript icon registry that exports SVG modules, ensuring consistent alias naming so icons resolve at runtime.

What is the correct structure for an Umbraco extension manifest icon entry?▼

An Umbraco extension manifest icon entry requires a docs-aligned structure mapping your TypeScript icon registry exports to the extension system, allowing the UI to recognize and load your custom SVG icon packs.

How do I use a registered custom icon in Umbraco HTML templates?▼

You use a registered custom icon in Umbraco HTML templates by referencing its resolved alias name within the umb-icon template or other extension metadata, verifying it renders correctly across the backoffice UI.

Do I need TypeScript to create an Umbraco icons registry?▼

Yes, you need TypeScript to create an Umbraco icons registry because the workflow requires TypeScript icon registry exports to wire SVG file modules into the extension manifest and expose them to the backoffice UI.

Why are my custom Umbraco icons not rendering at runtime?▼

Custom Umbraco icons fail to render at runtime if the extension manifest entries and TypeScript icon registry exports lack consistent icon naming, preventing the registered aliases from resolving correctly in the backoffice UI.

Related Skills

Explore More Software Engineering Skills→
1k-off1k-off
1

umbraco-icons

Register custom SVG icons for the Umbraco backoffice via extension manifest.

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-manifest-picker

Select registered Umbraco extension manifests via umb-input-manifest.

Community
Intermediate
albanistalbanist
4

umbraco-icons

Register custom SVG icons in Umbraco backoffice via extension manifests.

Community
Basic
kraftvaerkkraftvaerk

umbraco-icons

Register custom SVG icons in the Umbraco backoffice via extension manifest.

Official
Basic