skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-icons

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

1|Updated May 21, 2026
Search Tags:#typescript#icons#svg#umbraco#backoffice#ui integration#extension manifest
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-icons-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-icons
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-icons
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-icons-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps extension authors define and register custom SVG icons so they can be reused consistently across the Umbraco backoffice UI.

Core Features & Use Cases

  • Icon registration via extension manifest: Declare icons with an alias and wire them to your extension so Umbraco can discover them.
  • SVG module-based icon definitions: Provide icons as exported SVG content from JavaScript modules for clean maintainability.
  • Backoffice consumption in UI: Reference registered icons by name in extensions that accept an icon property or in templates using icon components.

Use case: You’re building an Umbraco extension with multiple header buttons and want each action to have a matching branded SVG icon without duplicating markup.

Quick Start

Fetch the latest Umbraco icon documentation, then create your package manifest, register icon module entries, and add your SVG export files so your icons can be referenced by the alias you choose.

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?▼

Registering custom SVG icons in Umbraco requires defining an extension manifest with icon aliases and exporting SVG content from JavaScript modules, allowing backoffice UI elements to reference icons by name without duplicating markup.

What is the process for registering an icon in an Umbraco extension manifest?▼

Registering an icon in an Umbraco extension manifest involves declaring the icon with a unique alias and wiring it to exported SVG module content, enabling the backoffice to discover and consume the icon in UI components like header apps and buttons.

Can I reuse the same SVG icon across multiple Umbraco header apps and buttons?▼

Yes, you can reuse a registered SVG icon across multiple Umbraco header apps and buttons by declaring it once in your extension manifest and referencing its alias in any UI extension that accepts an icon property.

Does Umbraco extension development require TypeScript for custom icon definitions?▼

Umbraco extension development utilizes TypeScript and JavaScript modules to define custom icons, requiring you to export SVG content from modules so the extension manifest can wire icon names to the imported SVG paths.

Where does the Umbraco backoffice consume registered SVG icons?▼

The Umbraco backoffice consumes registered SVG icons in UI extensions that accept an icon property, such as header apps and buttons, and in templates using icon components that reference the registered alias.

Related Skills

Explore More Software Engineering Skills→
albanistalbanist
4

umbraco-icons

Register custom SVG icons in Umbraco backoffice via extension manifests.

Community
Basic
albanistrefialbanistrefi
4

umbraco-icons

Register custom SVG icons in Umbraco backoffice extension manifests.

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-header-apps

Implement Umbraco Backoffice header apps with manifest-driven integration.

Community
Intermediate
umbracoumbraco
26

umbraco-icons

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

Official
Basic