zammad/app/frontend/shared/components/CommonIcon

Rules for Icons in the New Stack

• All icon names must be unique, however you are free to put them in another set (subdirectory).
• All icons must use fill for their elements, but not stroke. In case of outlined design, please expand the stroke into a path first.
• All icons must be provided in a monochrome design and any fill values must be removed from the SVG definition. This includes fill="none" on the root element too. An implicit fill: currentColor rule is applied by CommonIcon component, so it will inherit the color of the surrounding text.
• Attributes fill-rule and clip-rule can be applied only if the design requires it (no implicit attributes are allowed).

Rules for desktop Icon Set

• All icons must have size of width="16" and height="16", any further resizing can happen only inside CommonIcon component. Please make sure that viewBox is set to 0 0 16 16.
• All icons must be put into app/frontend/apps/desktop/initializer/assets/ directory.
• All third-party icons must be credited properly in app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md.

Rules for mobile Icon Set

• All icons must have size of width="24" and height="24", any further resizing can happen only inside CommonIcon component. Please make sure that viewBox is set to 0 0 24 24.
• All icons must be put into app/frontend/apps/mobile/initializer/assets/ directory.
• All third-party icons must be credited properly in app/frontend/apps/mobile/initializer/3RD-PARTY-ICONS.md.

Using Icons in the "shared" Context

All icon names used in shared context should refer to an alias defined in mobileIconsAliasesMap.ts and/or desktopIconsAliasesMap.ts. Alias refers to the icon name from assets folder depending on the app. Alias name is always preferred when displaying an icon even if icon with that name already exists.