@typo3/icons

SVG icons for the TYPO3 CMS backend

Sizes

default Scales with font-size
small 16px
medium 32px
large 48px
mega 64px

Colors

  • #FF8700 TYPO3 primary color
  • #E8A33D Yellow
  • #FFC857 Yellow light
  • #515151 Gray dark
  • #8C8C8C Gray
  • #B9B9B9 Gray light
  • #EFEFEF Gray brighter
  • #C83C3C Red
  • #FF6777 Red light
  • #79A548 Green
  • #AAD400 Green light
  • #5599FF Blue
  • #ABD7FF Blue light
  • #663399 Purple

Action Icons

Size
16x16px
Protective space
1px
Effective Size
14x14px
Outline width
1px
Smoodt Edges
0.5px / 0.25px
Color
black / transparent

Overlay Icons

Size
11x11px

BiDi (Bidirectional) Support

This icon set includes logical icon variants that support bidirectional languages (Arabic, Hebrew, etc.).

Logical Icons
Use -start/-end for navigation and reading direction (previous/next, back/forward)
Physical Icons
Use -left/-right for absolute positioning (west/east, align left/right)
Implementation
Icons with bidi: true automatically receive the icon-bidi class and flip in RTL mode
Example
LTR (Left-to-Right)
Previous Next
RTL (Right-to-Left)
السابق التالي

Module Icons

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

Canvas & Scaling

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

Primary Elements
Use fill="currentColor" for main shapes. This allows the icon to inherit the text color from its context.
Secondary Elements
Use fill="currentColor" with opacity=".4" for less prominent details.
Accent Elements
Use fill="var(--icon-color-accent, #ff8700)" for highlighted parts of the icon. The CSS variable allows theming while the fallback ensures the icon works 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

Build

npm ci
npm run stylelint
npm run icons-build
npm run version-build

Site

npm ci
npm run site-build
npm run site-serve

Release

npm version [major | minor | patch]
git push origin main --tags
npm publish

Commit Message Convention

This project follows a commit message convention where each commit should be prefixed with a type:

  • [FEATURE] - New features or functionality
  • [BUGFIX] - Bug fixes
  • [TASK] - General maintenance tasks (refactoring, dependencies, etc.)
  • [DOCS] - Documentation changes
  • [!!!] or [BREAKING] - Breaking changes

The automated changelog generation categorizes commits based on these prefixes. Release commits with [RELEASE] prefix are automatically excluded from the changelog.