skills.rest
pimcore
pimcoreOFFICIAL
Explore all skills by this author →
Website𝕏@pimcoreGitHub

pimcore-studio-ui-icons

Render SVG icons by name or path in Pimcore Studio UI.

13|Updated Apr 2, 2026
Search Tags:#ui#svg#icon#registration#icon-library#color-groups#pimcore
One-click install
npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pimcore-studio-ui-icons
Source: https://github.com/pimcore/skills/tree/main/skills/pimcore-studio-ui-icons
Command: npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates and streamlines the use of icons in Pimcore Studio by offering a unified Icon component, a clear registration workflow for custom icons, and consistent color theming across UI elements.

Core Features & Use Cases

  • Icon component - Rendering icons by name or path
  • Built-in icon library - List of common icons by category
  • Registering custom icons - Add new icons via modules
  • Creating SVG icon components - Best practices for SVG components
  • Icon color groups - Apply element/field colors to icons

Quick Start

Import the Icon component and render a built-in icon by name in your Pimcore Studio UI.

Frequently Asked Questions about pimcore-studio-ui-icons

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

FAQPage Schema
How do I add custom SVG icons to Pimcore Studio UI?▼

You add custom SVG icons to Pimcore Studio UI by registering them via the module system. This workflow integrates new SVG graphics into the environment, making them available for rendering by name or path.

What is the best way to apply consistent colors to UI icons in Pimcore?▼

The best way to apply consistent colors to UI icons in Pimcore is by using the icon color grouping system. It applies element and field definition colors across the UI, while SVGs use fill='currentColor' for seamless theme integration.

How does rendering icons by name or path work in Pimcore Studio?▼

Rendering icons by name or path in Pimcore Studio works through a reusable Icon component. You import the component and pass the specific built-in icon name or custom path to display the corresponding SVG graphic in your UI.

Does the Pimcore Studio icon component support sub icons and sphere wrappers?▼

Yes, the Pimcore Studio icon component supports advanced features like sub icons and sphere wrappers. These capabilities allow you to render complex icon structures beyond standard single SVG graphics within the UI.

Can I use my own SVG files with the Pimcore Studio icon library?▼

Yes, you can use your own SVG files alongside the built-in icon library in Pimcore Studio. By creating SVG icon components and registering them through modules, your custom graphics become part of the unified icon system.

Related Skills

Explore More Design & Creative Skills→
1k-off1k-off
1

umbraco-icons

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

Community
Intermediate
ProfPowellProfPowell
1

icons

Standardize Lucide-based icons with a local <x-icon> component.

Community
Intermediate
pimcorepimcore
13

pimcore-studio-ui-using-sdk-in-bundles

Consume Pimcore Studio UI SDK in bundles for module federation extensions.

Official
Advanced
RuzenieRuzenie
2

svg-canvas-icon-engine

Convert SVG and Canvas icon capabilities into executable icon generation skills.

Community
Intermediate