Icons

Every badge can show an icon next to its text. The plugin ships with a curated library of 460+ SVG icons and also lets you upload custom SVGs through Shopware’s media manager.

Picking an icon

In the badge form, open the Icon card and pick from:

Built-in icons — search the catalogue by keyword (e.g. star, flame, truck).
Custom upload — pick any SVG you have uploaded to Shopware’s media library.

Leave the field empty to render the badge with text only.

Icon settings

Each badge controls its icon independently:

Field	Effect
Icon	The SVG to render.
Size	Icon size in CSS units (e.g. `16px`, `1rem`).
Color	Icon color. Inherits from the badge text color when empty.
Position	Left or Right of the text.
Margin	Extra space between the icon and the text.

The icon size field falls back to the slot / placement / global default if empty (see Styling overview).

Inline vs. block icons

The icon and text share the same flex container. The Flex direction field on the badge / slot / global defaults controls the order:

Row — text + icon next to each other (icon on the right unless Position = Left).
Row-reverse — flipped.
Column / column-reverse — icon and text stacked.

For most badges, the default Row layout combined with the Position field is enough.

Tips

Reuse the same icon family across all badges for a consistent look (e.g. all rounded outline icons).
Match the icon color to the badge background for a subtle accent, or contrast it with the text color for emphasis.
For corner ribbons, skip the icon — the diagonal layout already carries enough visual weight.
Use SVGs (not PNG/JPG) so the icon scales cleanly with the badge font size.

Custom SVG considerations

When uploading a custom icon:

Upload it as an SVG to Content → Media in the standard Shopware media browser.
Use square SVGs (e.g. 24×24, 32×32) so they line up with the icon size value.
Inline fill="currentColor" lets the icon inherit the badge text/icon color. If your SVG hardcodes a color, the Color field will not affect it.