Icons

Meteor icons follow a minimal, expressive style aligned with Shopware's product language. For technical usage, see the Icon component documentation.

Philosophy

Icons in Meteor are functional first. They exist to support actions, communicate state, and aid navigation. Not to decorate. Every icon in the kit serves a clear interface purpose.

The style is intentionally restrained: consistent stroke weights, unified corner radii, and optical sizing that keeps icons readable at small sizes. This restraint makes the set cohesive and ensures icons never compete with the content they support.

All icons

Common usages

These examples demonstrate typical icon usage in the Shopware Administration and other Shopware products that use Meteor, where each icon has a clearly defined meaning.

Regular and solid variants

Most icons come in two variants. Use them consistently within similar contexts. Mixing variants arbitrarily inside the same control group creates visual inconsistency.

Regular is the default for standard interface actions and supporting UI. Use it for navigation, actions, and inline indicators.

Solid works better for very small sizes and for larger decorative or prominent icon placements where a heavier fill reads better.

<script setup lang="ts">
import MtIcon from "@shopware-ag/meteor-component-library/MtIcon";
</script>

<template>
  <mt-icon name="calendar" mode="regular" size="var(--scale-size-20)" />
  <mt-icon name="calendar" mode="solid" size="var(--scale-size-20)" />
</template>

Sizing

Meteor icons are designed for a small set of sizes. Staying within this set keeps the UI consistent across screens.

• 24px: Standalone icons, empty states, prominent surfaces
• 20px: Standard actions, headers, supporting icons in regular-density UI
• 16px: Inline controls, field affordances, compact supporting UI
• 14px or smaller: Dense UI only, where the icon is clearly secondary

<script setup lang="ts">
import MtIcon from "@shopware-ag/meteor-component-library/MtIcon";
</script>

<template>
  <mt-icon name="products" mode="regular" size="var(--scale-size-24)" />
  <mt-icon name="products" mode="regular" size="var(--scale-size-20)" />
  <mt-icon name="products" mode="regular" size="var(--scale-size-16)" />

  <!-- Smaller exceptions for dense UI -->
  <mt-icon name="pencil-s" mode="solid" size="var(--scale-size-14)" />
  <mt-icon name="clock" mode="solid" size="var(--scale-size-12)" />
  <mt-icon name="chevron-right-s" mode="regular" size="var(--scale-size-10)" />
</template>

Color

Always use semantic icon tokens so they adapt correctly to light and dark themes and to interactive states.

• --color-icon-primary-default for the standard icon color
• --color-icon-secondary-default when the icon should attract less attention than surrounding content
• Semantic variants such as brand, attention, critical, positive, or accent when the icon color carries a contextual meaning

See the Tokens page for the full list of available icon color tokens.

<script setup lang="ts">
import MtIcon from "@shopware-ag/meteor-component-library/MtIcon";
</script>

<template>
  <mt-icon name="cog" mode="solid" color="var(--color-icon-primary-default)" />
  <mt-icon name="ban" mode="solid" color="var(--color-icon-secondary-default)" />
  <mt-icon name="info-circle" mode="solid" color="var(--color-icon-brand-default)" />
  <mt-icon name="exclamation-triangle" mode="solid" color="var(--color-icon-attention-default)" />
  <mt-icon name="exclamation-circle" mode="solid" color="var(--color-icon-critical-default)" />
  <mt-icon name="check-circle" mode="solid" color="var(--color-icon-positive-default)" />
  <mt-icon name="link" mode="solid" color="var(--color-icon-accent-default)" />
</template>

Icons and meaning

Icons rarely stand alone. Pair them with a visible label or place them inside a control that already communicates its purpose. When an icon does carry meaning on its own (a close button, a status indicator), make sure that meaning is also available through visible text or an accessible label on the parent control.

Adding icons to the kit

New icons require sign-off from both design and engineering before they are added. The process ensures every new icon is genuinely needed, fits the visual style, and arrives in the codebase ready to use.

Starting the work

New icons always start in Figma. The designer draws the icon and adds it to the Meteor icon library file before any code is written. This keeps the source of truth in design and makes the review step natural: reviewers can see the icon in context alongside the rest of the set.

Open the discussion early by sharing the Figma frame in the Meteor Slack channel, leaving a comment on the icon library file, or opening a GitHub issue. Early visibility prevents duplicate work and gives engineering a chance to flag any technical constraints before design is finalized.

What to cover in the proposal

• What the icon represents and the interface contexts where it will appear
• Whether a regular variant, a solid variant, or both are needed
• Whether an existing icon could cover the need with a different usage convention

Naming

Icons follow the regular-name and solid-name prefix convention. The name after the prefix should describe what the icon depicts, not where it is used. Keep names short, lowercase, and hyphenated.

Review and sign-off

Both the design team and the Meteor engineering team review the proposal. The review checks that the new icon is consistent with the existing visual style, that it is not a duplicate of something already in the kit, and that the name follows the naming convention.

From Figma to code

Once approved, the icon lives in the Figma library. From there a custom sync script exports the icon assets and packages them into the icon kit. The Meteor team owns the PR that lands the icon in the codebase and publishes it in the next release.