Orbex Sonar-DB Design system

Icons

Two families, one look. The components draw a handful of marks themselves, so they need nothing else to work; everything else is a Material Symbol, Rounded, weight 400, passed in by the product. Both take the color of the text beside them.

Marks the components draw

Drawn on a 16 px grid with a 1.75 px round stroke, in currentColor. They are part of the components, not an icon set to pick from: a product never imports them.

Light
  • Check Checkbox, menu choices
  • Dash Checkbox, partly selected
  • Chevron down Select, unit menu
  • Close Dialog, toast, search field
  • Alert Field errors, warning and danger notices
  • Info Info notices
  • Success Success notices
  • Arrow Card link
  • Search Search field

Product icons

Material Symbols, Rounded, weight 400, grade 0, at the optical size of 24. Outlined by default; filled (the -fill variant) only to show a state: in stock, a quick action, a call in progress. The chevrons that step through days and months are weight 500, so they read as bold beside 12 px labels. These are the 62 icons the overview and its panels use, with their Material names.

Light
  • unfold_more
  • add
  • calendar_month
  • content_copy
  • delete
  • download
  • edit
  • keyboard_arrow_down
  • filter_list
  • grid_view
  • view_list
  • more_vert
  • notifications
  • print
  • refresh
  • search
  • share
  • local_shipping
  • chevron_left
  • chevron_right
  • shopping_cart
  • package_2
  • arrow_upward
  • arrow_downward
  • drag_indicator
  • bolt
  • event_busy
  • more_horiz
  • apps
  • check_circle-fill
  • cancel-fill
  • swap_horiz
  • call-fill
  • receipt_long
  • schedule
  • error
  • event
  • close
  • add_circle
  • inventory_2
  • tune
  • account_balance
  • arrow_back
  • arrow_forward
  • check
  • north_east
  • star_shine
  • info
  • bolt-fill
  • remove
  • my_location
  • zoom_out_map
  • priority_high
  • lightbulb
  • description
  • warehouse
  • monitoring
  • list_alt
  • autorenew
  • request_quote
  • event_repeat
  • open_in_new

Sizes

16 px size.icon.small Inside small controls and text: the unit menu, fields, status lines, the stock line of a product
20 px size.icon.medium Buttons, icon buttons, menu items, search results
24 px — Navigation, the card header’s bolt, the empty state of a calendar day (28)

The two icon tokens, size.icon.small (16 px) and size.icon.medium (20 px), are the boxes the components give an icon; the icon fills its box. On touch screens icons keep their size and the control around them grows to the 48 px target.

Weight and color

  • One weight. Symbols at 400 match the 1.75 px stroke of the marks at 16 px and the medium weight of labels. Never mix weights in one screen.
  • The color of the text. Icons are drawn in currentColor, so they follow the text level, the theme and the disabled state with no extra token.
  • Color says nothing alone. A red icon always comes with words: a status, an alert with its name.

Use

  • Decorative by default. An icon beside a label is hidden from assistive technology; the label names the action.
  • Icon-only buttons have a name. IconButton requires a label, read by screen readers; pair it with a tooltip where there is room to hover.
  • One meaning per icon. The truck is a delivery everywhere; the receipt, an invoice. A new meaning takes a new icon.
  • Icons support words, not replace them, except for the few actions everyone knows: close, search, add, more.

Import them

Components take any icon as a React node, so the product chooses how to load them. This is how this site does it, with no icon font and no runtime download: only the icons used end up in the bundle.

tsx 
/* 1. Install the symbols: one SVG per icon, weight 400, outlined, rounded or sharp, each with a -fill variant */
npm install @material-symbols/svg-400 @material-symbols/svg-500

/* 2. Make a component from the SVG’s path. With Vite, ?raw reads the file as text at build time */
import truck from '@material-symbols/svg-400/rounded/local_shipping.svg?raw'

const path = truck.match(/ d="([^"]+)"/)?.[1]

export const ShippingIcon = (props) => (
  <svg viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" {...props}>
    <path d={path} />
  </svg>
)

/* 3. Pass it to a component: the component sizes it and the label names the action */
<IconButton label="Track delivery" icon={<ShippingIcon />} />
<Button icon={<AddIcon />}>New order</Button>