Module icons

Module icons are used in the TYPO3 backend navigation. They are designed at 64x64px but typically rendered at 32x32px.

Canvas & scaling

Property	Value
Canvas Size	64x64px
Rendered Size	32x32px (typical display size)
Protective Space	12px from edges (content area: 40x40px centered)
Stroke Width	4px (scales to 2px at 32x32)
Corner Radius	2px for small elements, 4px for larger shapes

Colors

Element	How it is filled
Primary	Use `fill="currentColor"` for main shapes, so the icon inherits the text colour of its context.
Secondary	Use `fill="currentColor"` with `opacity=".4"` for less prominent details.
Accent	Use `fill="var(--icon-color-accent, #ff8700)"` for highlighted parts. The custom property allows theming; the fallback keeps the icon working standalone.

Structure Example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <!-- Primary shape -->
  <path d="..." fill="currentColor"/>

  <!-- Secondary/detail elements -->
  <path d="..." fill="currentColor" opacity=".4"/>

  <!-- Accent highlight -->
  <rect ... fill="var(--icon-color-accent, #ff8700)"/>
</svg>

Example

Module icons adapt to their context. The currentColor elements inherit the text color, while the accent color can be customized via the --icon-color-accent CSS variable.

Light Background

Dark Background

Custom Accent

Design Tips

Design at 64x64 but preview at 32x32 to ensure clarity at the rendered size
Use even stroke widths (4px recommended) for crisp scaling
Keep details simple - fine lines may disappear at smaller sizes
Test with both light and dark backgrounds since currentColor adapts
Limit accent color usage to small highlights that draw attention to the icon's purpose