From craft-workspace-webconsulting-skills
Designs and migrates TYPO3 v14 extension icons using Core Icon API and backend icon language. For module, plugin, record, action icons, Extension.svg, Configuration/Icons.php, iconIdentifier, pluginIcon, typeicon_classes.
npx claudepluginhub dirnbauer/webconsulting-skillsThis skill uses the workspace's default tool permissions.
> Prefer live TYPO3 v14 references over bundled snapshots. Use the official Icon API
Guides TYPO3 v14.x extension development with version constraints in composer.json/ext_emconf.php, PHP 8.2+ features, core APIs, patterns, and upgrade workflows. For v14 updates, migrations, LTS core work.
Generates project-specific SVG icon sets with consistent style specs for websites and apps. Activates on custom icon requests or projects needing visual assets like service icons.
Provides Iconsax icon library with Linear, Bold, Two-tone styles and AI generation for premium, consistent UI icons in navigation menus, toolbars, and action buttons.
Share bugs, ideas, or general feedback.
Prefer live TYPO3 v14 references over bundled snapshots. Use the official Icon API docs for registration rules and the TYPO3.Icons catalog for the current Core SVG language. Use the local reference files only to keep this skill concise.
Use this skill to:
Configuration/Icons.php and all icon consumersDo not invent a second icon system for the extension. Work with the icon identifiers, file names, and render contexts that already exist in the codebase.
Configuration/Icons.php and every iconIdentifier / pluginIcon /
typeicon_classes consumer.When the user asks for new icons, first capture or infer:
If the repository already makes the meaning obvious, proceed without stopping. If not, ask for a short mapping such as:
module-myext -> "main module for editorial planning"record-myext-campaign -> "campaign record"plugin-myext-list -> "frontend list plugin"The user can describe usage, not geometry. Translate usage into icon semantics.
Use sources in this order:
EXT:styleguide, inspect the real backend rendering
there as a runtime checkPrefer loading the current Core icons when needed. Do not ship copies of Core icons into an extension unless the user explicitly wants vendored assets or the environment is offline.
| Type | Typical file | Render context | ViewBox | Where to look for references |
|---|---|---|---|---|
| Parent / submodule | module-*.svg | Backend navigation, module menu | 0 0 64 64 | module catalog |
| Extension icon | Extension.svg | Extension Manager and related backend views | 0 0 64 64 | module catalog |
| Plugin icon | plugin-*.svg | New content element wizard, list view, plugin selectors | usually 0 0 16 16 | content, default, apps |
| Record icon | record-*.svg | TCA, page tree, list module | usually 0 0 16 16 | default, apps, mimetypes, overlay, status |
| Action icon | actions-*.svg | Buttons, toolbars, controls | usually 0 0 16 16 | actions |
Always match the render size and visual density of the icon type you are editing. Do not force a 64x64 module composition into a 16x16 record or action icon.
currentColorvar(--icon-color-accent, #ff8700)xmlns plus viewBox only unless a provider truly needs moremodule-* and Extension.svg: prefer strong silhouettes, minimum 6-unit outline
width, and .8 opacity for depth fills when neededSee references/design-notes.md for the visual rules and anti-patterns.
TYPO3 v14 ships auto / light / dark color scheme switching in the backend (introduced as a Core feature in v13.3, carried into v14). Every custom icon must render correctly in both schemes. There is no separate "dark icon" file — the same SVG is used.
The two CSS tokens that the Core ships on :root (from TYPO3.Icons/assets/scss/icons.scss)
are:
:root {
--icon-color-primary: currentColor;
--icon-color-accent: #ff8700;
}
How to stay compatible with both schemes:
currentColor (or var(--icon-color-primary, currentColor)) for the primary
silhouette. It inherits the surrounding text color, which flips automatically when
the user switches color scheme.var(--icon-color-accent, #ff8700) for the accent. TYPO3 orange #ff8700 is the
same fallback in both schemes because orange has sufficient contrast on both light
and dark backend surfaces. Do not replace it with a scheme-specific hex — themes
that want a different accent override the CSS variable, not the fallback.fill="#000", fill="#333", fill="#fff", fill="white", or
fill="black". Any one of these vanishes on one of the two backgrounds.fill-opacity=".8" on top of currentColor) is safe because the
base tone flips with the scheme.prefers-color-scheme media queries inside the SVG. The Core drives
the scheme via an attribute on the root element, and relying on
prefers-color-scheme will miss manual switches from the User Settings dropdown.Verify every icon in both schemes before shipping (see Verification below).
Register icons in Configuration/Icons.php. TYPO3 v14 requires this and no longer allows
registration in ext_localconf.php.
<?php
declare(strict_types=1);
use TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider;
return [
'module-myext' => [
'provider' => SvgIconProvider::class,
'source' => 'EXT:my_extension/Resources/Public/Icons/module-myext.svg',
],
'record-myext-item' => [
'provider' => SvgIconProvider::class,
'source' => 'EXT:my_extension/Resources/Public/Icons/record-myext-item.svg',
],
];
Update every consumer after the SVG is in place:
Configuration/Backend/Modules.php -> iconIdentifierConfiguration/TCA/*.php -> typeicon_classes, iconIdentifierConfiguration/TCA/Overrides/*.php -> pluginIcon, page-type or folder iconsThe official docs state that icons must be registered in the icon registry through
Configuration/Icons.php, and that registration in ext_localconf.php is no longer
possible in TYPO3 v14.
When legacy SVGs already exist:
Use references/migration-steps.md for the checklist.
Before finishing:
#000, #333, #fff, white, or black fills remain