Foundation

Iconography

See icons doing real product work first. Lucide is the exclusive interface family; visible language and accessible names keep every meaning precise.

01 / The decision

One familiar language for product actions

Use Lucide for navigation, search, filters, export, overflow, status, and operational objects. The Ordering.co symbol identifies the brand; it never replaces a Lucide action or object icon. The product shell below uses governed Ordering.co controls—not a static toolbar mock.

Selected destination

Overview

Icon + text

Keep the label for primary, unfamiliar, or risky work.

Icon only

The accessible name is permanent; the tooltip aids discovery.

Operational

State + words

Shape and text preserve status without depending on color.

02 / See it in use

Start with the priority vocabulary

Choose the icon by meaning and job. Navigation, actions, status, and operations each have a small set of preferred metaphors before the full catalog is needed.

Navigation

Movement through product structure. Directional icons describe a real destination or hierarchy.

OverviewLayoutDashboard

BusinessesStore

PeopleUsers

SettingsSettings

Actions

Commands that change, retrieve or reveal information. Accessible names remain mandatory even when labels are visually hidden.

Create or addPlus

SearchSearch

FilterFilter

Refine a listListFilter

Status

A status icon reinforces a precise written state. Shape and wording preserve meaning without color.

SuccessfulCheckCircle2

AttentionAlertTriangle

FailedCircleX

InformationInfo

Operations

Domain objects and system capabilities. These never replace the masterbrand symbol.

OrganizationBuilding2

DeliveryTruck

LocationMapPin

PaymentCreditCard

03 / How it works

A single optical contract

Import the official Lucide component. Do not redraw, fill, stretch, or mix it with another interface family.

Canvas

16 × 16px

Stroke

1.75px

Color

currentColor

X — not a logo

Icon with text

Keep visible text when an action is primary, unfamiliar, ambiguous, or risky.

Icon-only control

Provide a persistent accessible name and a tooltip. The tooltip supports discovery; it never replaces the name.

Status

Pair the icon with precise state text. Shape and wording must preserve meaning when color is unavailable.

Brand boundary

Lucide communicates interface meaning. The raw or contained Ordering.co symbol communicates identity only. Choose the correct brand asset.

04 / Use & avoid

Consistency is part of recognition

A stable metaphor becomes faster with repetition. Changing style, mixing libraries, or borrowing the Ordering.co symbol as a control breaks that learned behavior.

Use

Use one Lucide metaphor consistently. Keep visible text for consequential actions and name every icon-only control.

Avoid

Do not mix icon families, alternate metaphors, or use the raw or contained Ordering.co symbol as an interface control. Brand recognition and interface meaning are separate jobs.

05 / Adaptation

Meaning survives every control state

The product specimen includes selected navigation, a disabled menu item, a destructive menu action, icon-only naming, tooltips, and keyboard focus.

Selected

Current location is expressed with aria-current, text, icon, and a governed selected surface.

Disabled

Keep the label readable and the unavailable state programmatic. Do not imply that focus can reach it.

Destructive

Use the destructive treatment only when the consequence is genuinely destructive and named in text.

Focus

This persistent specimen shows the two-pixel focus ring. Tab to the control to verify its native focus behavior.

Keyboard and focus

Tab through the toolbar. Every interactive icon receives the governed two-pixel focus outline and retains its accessible name.

Touch and density

The visible icon remains 16px with a 1.75px stroke. The surrounding target expands to at least 44px where touch input requires it.

06 / Technical reference

Search the full approved catalog

The priority vocabulary handles common work. Open the complete catalog when you need exact names, contexts, or visible-text guidance.

Full searchable Lucide catalog

Search the approved catalog

38 icons shown

Movement through product structure. Directional icons describe a real destination or hierarchy.

LayoutDashboard

Overview

Primary product navigation

Visible text: Always

Store

Businesses

Marketplace entities

Visible text: Always

Users

People

Customers, operators or team members

Visible text: Always

Settings

Settings

Configuration destination

Visible text: Always

Menu

Open navigation

Compact and mobile navigation

Visible text: In icon-only actions

ChevronDown

Reveal choices

Disclosure or select affordance

Visible text: No

ArrowLeft

Previous or back

Linear navigation

Visible text: When unfamiliar

ArrowRight

Next or continue

Linear navigation

Visible text: When unfamiliar

Actions

Commands that change, retrieve or reveal information. Accessible names remain mandatory even when labels are visually hidden.

Plus

Create or add

Primary creation action

Visible text: When unfamiliar

Search

Search input or trigger

Visible text: In icon-only actions

Filter

Filter

Open or apply filtering

Visible text: When unfamiliar

ListFilter

Refine a list

Dense table toolbar

Visible text: When unfamiliar

ArrowDownToLine

Download

Save a generated file

Visible text: When unfamiliar

Upload

Upload

Send a local file

Visible text: When unfamiliar

Copy

Copy

Copy identifier, URL or code

Visible text: In icon-only actions

Pencil

Edit

Modify the current object

Visible text: In icon-only actions

Trash2

Delete

Destructive removal

Visible text: Always

Ellipsis

More actions

Overflow menu

Visible text: In icon-only actions

ExternalLink

Opens elsewhere

External destination or new context

Visible text: When unfamiliar

RefreshCw

Refresh or retry

Update data or retry an operation

Visible text: When unfamiliar

Status

A status icon reinforces a precise written state. Shape and wording preserve meaning without color.

CheckCircle2

Successful

Completed or healthy operation

Visible text: Always

AlertTriangle

Attention

Recoverable warning

Visible text: Always

CircleX

Failed

Operation or validation failure

Visible text: Always

Info

Information

Non-blocking contextual guidance

Visible text: Always

Clock3

Pending

Waiting or scheduled state

Visible text: Always

ShieldAlert

Security attention

Permissions or security boundary

Visible text: Always

BadgeCheck

Verified

Explicitly verified entity

Visible text: Always

CircleHelp

Unknown

State cannot yet be determined

Visible text: Always

Operations

Domain objects and system capabilities. These never replace the masterbrand symbol.

Building2

Organization

Operating account or legal entity

Visible text: Always

Truck

Delivery

Delivery routing or fleet

Visible text: Always

MapPin

Location

Store, address or service area

Visible text: Always

CreditCard

Payment

Payment methods and transactions

Visible text: Always

Webhook

Webhook

Event delivery integration

Visible text: Always

Boxes

Inventory or modules

Grouped operational objects

Visible text: Always

PackageCheck

Fulfilled order

Order completion

Visible text: Always

Link2

Integration

Connected system or linked record

Visible text: Always

Gauge

Performance

Measured system behavior

Visible text: Always

FileText

Report or document

Exported or governed content

Visible text: Always