Icons — Valere CRM

Base

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

Source: Lucide

Navigation

The shell, the user menu, tables, the KPI deltas

	Sprite id	Lucide name
	`#i-home`	`House`
	`#i-search`	`Search`
	`#i-menu`	`Menu`
	`#i-chevron-down`	`ChevronDown`
	`#i-chevron-left`	`ChevronLeft`
	`#i-chevron-right`	`ChevronRight`
	`#i-arrow-up`	`ArrowUp`
	`#i-arrow-down`	`ArrowDown`
	`#i-dots`	`Ellipsis`
	`#i-settings`	`Settings`
	`#i-inbox`	`Inbox`
	`#i-bell`	`Bell`
	`#i-logout`	`LogOut`

Actions

Buttons, the date picker, logging a call or an email, table filters

	Sprite id	Lucide name
	`#i-plus`	`Plus`
	`#i-pencil`	`Pencil`
	`#i-upload`	`Upload`
	`#i-download`	`Download`
	`#i-undo`	`Undo2`
	`#i-link`	`Link`
	`#i-eye`	`Eye`
	`#i-x`	`X`
	`#i-calendar`	`Calendar`
	`#i-mail`	`Mail`
	`#i-phone`	`Phone`
	`#i-filter`	`ListFilter`

Status

Status pills, Deal Health, locked fields, source and confidence — these keep their shape everywhere

	Sprite id	Lucide name
	`#i-check`	`Check`
	`#i-check-circle`	`CircleCheck`
	`#i-warn`	`TriangleAlert`
	`#i-x-circle`	`CircleX`
	`#i-info`	`Info`
	`#i-clock`	`Clock`
	`#i-lock`	`Lock`
	`#i-sparkles`	`Sparkles`

Objects

The menu, the Product page, cards

	Sprite id	Lucide name
	`#i-file`	`File`
	`#i-building`	`Building2`
	`#i-user`	`User`
	`#i-users`	`Users`
	`#i-chart`	`ChartColumn`
	`#i-database`	`Database`
	`#i-globe`	`Globe`
	`#i-target`	`Target`
	`#i-truck`	`Truck`
	`#i-leaf`	`Leaf`
	`#i-flame`	`Flame`

This site

The theme switch of the showcase only, not the product

	Sprite id	Lucide name
	`#i-sun`	`Sun`
	`#i-moon`	`Moon`
	`#i-monitor`	`Monitor`

From the domain

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

Sprite id	Stands for	Where
`#i-site`	A Site	The menu (Sites), the Site page, search results
`#i-lead`	A Lead — a Site not yet instructed	The menu (Leads), the review queue
`#i-rp`	A registered provider (a Buyer / RP Account)	Accounts, the buyer journey
`#i-contractor`	A contractor Account	Accounts, the contractor journey, tenders
`#i-hots`	Heads of Terms	The Site’s HoTs, the signature status
`#i-fee`	A fee stream	The Fee stream card, the fee forecast
`#i-exchange`	Exchange of contracts	Key dates, the stage bar
`#i-completion`	Completion	Key dates, the stage bar
`#i-appraisal`	A financial appraisal	Back Office’s queue, the Site page
`#i-planning`	Planning: consent, status, the local planning authority	The Lead page, the site review checklist
`#i-s106`	S106 and affordable housing	Deal Type, the appraisal
`#i-units`	The unit stack and the schedule of accommodation	Appraisals, legals
`#i-meeting`	The Morning Meeting	The menu, the meeting views
`#i-benchmark`	The build-cost benchmark	Quote comparisons

Drawn for the product on Lucide’s grid: a 16 grid, a 1.75 stroke, round ends and joins, no fill. In the code they sit beside the Lucide icons as components of their own with the same props.

Sizes and rules

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

16 px

20 px

24 px

A 16 grid with a 1.5 margin; a 1.75 stroke, round ends and joins; the icon takes the colour of its text.
16 px in text, buttons, chips and tables; 20 px in the menu; 24 px alone in an empty state or a card head.
An icon alone carries an aria-label or a tooltip; beside a word it is aria-hidden.
The status icons keep their shape: a tick is done, a triangle a warning, a cross a failure, a clock in progress, a lock a closed door — never one drawn for another, and never colour without its icon.
Sparkles marks only what the AI layer proposed; it never decorates.