Icon

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

<template>
  <mt-icon name="products" mode="regular" color="var(--color-icon-primary-default)" />
</template>

Usage

Icon renders an SVG glyph from the Meteor icon kit for compact visual cues that support a label, action, or state. Use it when an icon should be rendered consistently through the component library, with color and sizing following design tokens instead of ad-hoc inline SVG usage.

To browse the full icon set, search by name, and review icon philosophy and common usage patterns, see the Icons reference.

import { MtIcon } from "@shopware-ag/meteor-component-library";

Examples

Mode

<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>

Sizes

<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>

Colors

<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>

API reference

Props

Prop	Type	Default
`name` *	`string`
`color`	`string`	`undefined`
`decorative`	`boolean`	`false`
`size`	`string`	`undefined`
`mode`	`"regular" \| "solid"`	`"regular"`

Behavior

name can include the icon mode directly, such as regular-products or solid-pencil-s.
mode is available when the name itself does not already include the regular- or solid- prefix, for example name="calendar" mode="solid".
Prefer the explicit mode prop in docs and app code when it makes the chosen variant easier to read at a glance.
solid icons usually work better for very small sizes and for larger decorative icon use, while regular icons are often a better default for standard interface actions and supporting UI.
size accepts pixel strings and plain numeric values, which are normalized to pixel sizes.
Icons inherit currentColor, so using icon color tokens keeps them aligned with the theme and state tokens used elsewhere in the library.

Accessibility

Use decorative for icons that are purely visual and already explained by surrounding text.
If an icon communicates meaning on its own, make sure that meaning is still available through visible text or accessible labeling on the parent control.
Do not depend on icon color alone to convey success, warning, or error states.

Icons: browse the full icon set, search by name, and review icon philosophy and common usage patterns.

Edit this pageorReport an issue

Help Text

A small help trigger that reveals brief supporting guidance in a tooltip.

Inset

A layout utility that lets content break out to the edges of a padded container, such as a Card, by consuming the container's inset spacing variables.