Icons

Mampfio uses a selection of Lucide icons: line icons (outlined, not filled) on a 24 px grid with 2 px lines and rounded ends, the brand book's icon style.

Icons draw in currentColor, so they take the text colour: ink on surfaces, on-action on primary buttons. Only the icons listed here are part of the design system. Each has one meaning; don't use an icon for something else.

Ordering

shopping-basketBasket (Warenkorb), with the item count as a count badge (`.mf-badge-count`)

plusAdd one more of a dish

minusRemove one of a dish

trash-2Remove a dish from the basket

receipt-textOrder and order history (Bestellung). Not `receipt`, which shows a dollar sign

Food and restaurants

pizzaPizza as a cuisine filter. Not a replacement for the logo

utensilsRestaurant or cuisine in general

chef-hatKitchen view in the restaurant backoffice

starRating (Bewertung)

heartFavourite restaurant or dish

Delivery

bikeRider on the way (Lieferung)

map-pinDelivery address

clockDelivery time

phoneCall the restaurant or the rider

Status

circle-checkSuccess, always with text (alert-success)

circle-alertError, always with text (alert-danger)

Navigation and actions

searchSearch

funnelFilters

menuOpen the navigation on small screens

arrow-leftBack

chevron-rightGo to a detail page

chevron-downExpand, dropdown

xClose, remove a filter

checkSelected, done

userAccount and login

sunSwitch to the light theme

moonSwitch to the dark theme

Using an icon

Inside a link or button, the icon is decoration: hide it from screen readers and keep the text.

<button type="button" class="btn btn-primary d-inline-flex align-items-center gap-2">
  <svg class="mf-icon mf-icon-sm" aria-hidden="true"><use href="/webjars/mampfio-design-system/icons/icons.svg#shopping-basket"></use></svg>
  In den Warenkorb
</button>

Alone, an icon needs a name: <svg class="mf-icon" role="img" aria-label="Warenkorb">. Use .mf-icon (24 px) on its own and .mf-icon-sm (20 px) in buttons and next to text.

Licence: Lucide (ISC and MIT).