Icons
Every actions-* icon from TYPO3/TYPO3.Icons. The identifiers are the core's
own — the same strings typo3_icon_lookup returns — so design and runtime
name the same thing.
Where they come from. The set is generated, never committed:
scripts/icons.ts copies a whole category out of the @typo3/icons
package, in the layout the package itself uses, so its own manifest resolves
against what ships. An empty packages/frontend/assets/icons/ means npm ci has not run;
it is not a missing file to work around.
Getting one outside actions. packages/frontend/dist/icons.json is the lookup — it
names an identifier's category and the path to its file, so nothing is
guessed from the spelling. It also maps the deprecated aliases to their
current names. Resolve an alias before using it — the old spelling is not
what typo3_icon_lookup returns.
To ship one, add its identifier to the ICONS list in
scripts/icons.ts and run make icons. Never drop a file into the
generated directory by hand.
A missing icon is contributed upstream, never drawn locally and never substituted from another set. The script fails on an identifier the package does not have, rather than falling back to anything.
A missing icon is contributed upstream, never drawn locally and never substituted from another set. The script fails on an identifier the package does not have, rather than falling back to anything.
Rules#
- TYPO3 UI glyphs use a 16 × 16 viewBox and filled paths with
fill="currentColor". The signet is deliberately stroked instead: one is interface vocabulary, the other a brand mark, and they do not pretend to be one drawing family. - Neutral standalone icons use
--text-secondary.--accentmarks only an active item; status colours belong only to icons that communicate that status. - An icon is as big as the text it sits in. That is the default and it
needs no asking:
<sds-icon>andclass="sds-icon"are both1em, so a glyph in a 13px label is 13px and one in body copy is 17px, and neither is a number anybody had to choose. - A number is for a glyph standing on its own — an empty state, a mark beside
nothing. Then: 16, 20, 24 or a whole multiple. Never 18 or 22. 16 is
the floor; below it, no icon at all. The element is asked with
size="24", markup withsds-icon--16,sds-icon--20orsds-icon--24— the steps a page reaches for by hand. Above them the element is the only way to ask, because a size a page picks once is a style rather than a name the system carries. - Icon before its label with an 8px gap — except direction icons, which follow.
- Inline the SVG wherever colour must follow the UI. An
<img>cannot inheritcurrentColor, which is whypackages/frontend/src/lib/icon.tsinlines rather than links.
These state icons have a stable meaning without visible text beside them and
may stand alone: actions-check-circle (answered),
actions-exclamation-triangle (version-bound),
actions-exclamation-circle (installation not bootable) and
actions-info-circle (a stated boundary). Give a standalone sds-icon a
label for assistive technology. Every other icon sits beside visible text
and is hidden from assistive technology rather than announced twice.