Design/Base

Design

Icons

Two groups only — the base icons the components and screens use, and the icons of the product’s domain — on their grid, with the names used in code, in both themes.

59 base icons and 11 of the product’s own, each with the place it is used. Nothing else is drawn.

Base

The standard icons the components and screens use, with the library’s names.

Actions

  • check Selected option, done step, checkbox
  • x Close a dialog, a chip, a toast
  • plus Sell tab, add a photo
  • pencil Edit a listing, a field’s value
  • trash-2New Remove a photo, delete a draft
  • undo-2 Try again, replay a picture
  • search Search field, Search tab
  • sliders-horizontalNew Filters on search and category
  • upload Photo uploader, evidence
  • cameraNew Photo uploader on the phone
  • download Shipping label PDF, CSV report
  • copyNew Tracking number, order number
  • external-linkNew Provider’s certificate, carrier tracking

Navigation

  • chevron-down Selects, menus that open
  • chevron-left Back a step, pagination
  • chevron-right A row that opens, pagination
  • arrow-leftNew Back in the phone’s header
  • arrow-up Sorting a table, a trend
  • arrow-down Sorting a table, a trend
  • menu Phone menu, admin rail
  • ellipsis Row actions, hidden path levels
  • house Home tab
  • panel-left Fold the admin sidebar
  • log-out Sign out

Shell and objects

  • user Account, seller profile
  • users Admin users and staff
  • bell Notifications, notification settings
  • inbox Inbox tab, empty saved list
  • message-circleNew Chat, messages
  • message-circle-offNew Blocked message notice
  • heart Save a listing, saved items
  • star Seller reputation
  • shopping-bag Orders, sales
  • tag My listings, offers
  • hand-coinsNew An offer, offer card
  • hourglassNew Reservation and offer countdown
  • wallet Payouts, payment account
  • truck Shipping, Orders tab
  • map-pinNew A shipment’s leg, the seller’s city
  • mailNew Verification sent, email settings
  • file Evidence, attachments
  • list-check Moderation queues
  • chart-column Admin reports
  • history Settings history, audit
  • flag Report a message or a listing
  • building-2 Business seller, hub chip
  • settings Settings
  • globe Currency and language
  • lock No access, a locked notification, the hub’s limits
  • eye Show a password
  • eye-offNew Hide a password

Status

  • circle-check Passed, success badge and toast
  • circle-x Failed, danger badge and alert
  • triangle-alert Warning, a field’s error, inconclusive
  • info Information, a hint
  • clock Pending, in review, a time

Theme

  • sun Light theme
  • moon Dark theme
  • monitor Follow the device

From the domain

The icons of the product’s own subjects, drawn for it.

Sizes and rules

The grid, the stroke, where an icon stands alone and where it needs a label.

lrm-seal
heart
16 px Web: in a button, a field, a row, a badge stroke 1.75
15 px Phone: the same places, a step smaller stroke 1.5
20 px A dialog’s mark, an empty list’s lead stroke 1.75
24 px The tab bar (22 on the phone), the admin rail stroke 1.5
  • Drawn on a 16-unit grid inside a 1.5-unit keyline; round caps and joins; no fill, the stroke in currentColor — an icon takes the color of its text.
  • A base icon has Lucide’s name, so the app takes it from the library unchanged; an icon of the product’s own is drawn in the same grid and stroke and starts with lrm-.
  • An icon goes with a word. Alone it may stand only where its meaning is universal (close, search, menu, more) and then carries an accessible name.
  • A status is never told by color or icon alone: the icon, the tone and the word come together.
  • The seal is the provider’s finding only. Pending, failed and inconclusive never wear it, and nothing else is drawn in brass.
  • An icon is added when a screen needs it, with the place named in plans/icons.md — never because a set “should have it”.