@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

Size
64x64px

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.