Search for a command to run...
FontAwesome Pro icons available via `@delphi/ui/icons`. Brand-concept icons (Insights, Actions, Knowledge…) hide their underlying glyph so we can swap the visual with one line. Generic icons are named after the FA glyph itself.
Two buckets. No third option.
Every icon mirrors its FontAwesome glyph in PascalCase with an Icon suffix.
The glyph name stays stable as FA evolves, prevents duplicate aliases pointing
at the same icon, and makes the right import discoverable without grepping
for synonyms.
| FA glyph | Export |
|---|---|
faMagnifyingGlass | MagnifyingGlassIcon |
faXmark | XmarkIcon |
faTrash | TrashIcon |
faGear | GearIcon |
faPaperPlane | PaperPlaneIcon |
faArrowUpRight | ArrowUpRightIcon |
faArrowUpRightFromSquare | ArrowUpRightFromSquareIcon |
faHashtag | HashtagIcon |
Solid variants append Solid before Icon: CopySolidIcon, StarSolidIcon.
Forbidden: anything that sneaks in a semantic name for a non-brand icon.
SearchIcon, DeleteIcon, SendIcon, ExternalLinkIcon, CloseIcon,
UndoIcon, ShareIcon, LogOutIcon — all wrong. The action or affordance
lives at the call site, not in the icon name.
If an icon represents a nameable product surface — a page, a settings
section, a feature with its own URL or nav label — it gets a semantic name
that hides the underlying glyph. Brand direction changes by editing one line
in icons.ts, not by hunting through callers.
Each brand surface ships a *SolidIcon companion. Use the regular variant
for idle state and the solid variant when the surface is selected/active.
| Surface | Export (regular + solid) | Glyph |
|---|---|---|
| Settings | SettingsIcon | faGear |
| Knowledge | KnowledgeIcon / KnowledgeSolidIcon | faBrain |
| Insights | InsightsIcon / InsightsSolidIcon | faArrowTrendUp |
| Conversations | ConversationsIcon / ConversationsSolidIcon | faComments |
| Audience | AudienceIcon / AudienceSolidIcon | faUsers |
| Profile | ProfileIcon / ProfileSolidIcon | faUser |
| Billing | BillingIcon / BillingSolidIcon | faCreditCard |
| Usage Limits | UsageLimitsIcon / UsageLimitsSolidIcon | faCirclesOverlap3 |
| Notifications | NotificationsIcon / NotificationsSolidIcon | faBell |
| Actions | ActionsIcon / ActionsSolidIcon | faArrowProgress |
The full brand-surface block lives at the bottom of icons.ts. New product
surfaces go there — never inline as a one-off semantic alias.
Could you say this name in a product spec or nav label? If yes → brand surface, semantic name is fine. If no → mirror the FA glyph.
"Settings" yes. "Usage Limits" yes. "External link" no. "Send" no. "Log out" no. "Hash" no.
Skeumorphic file-type marks live at their own subpath, @delphi/ui/components/icons/doctype — they're a deliberate carve-out from the FA system for tabular surfaces (Knowledge, Threads) where document-type fidelity matters.
FontAwesome icons inherit font-size from their parent (their width/height are set to 1em), so an icon dropped next to text automatically matches that text's size.
The only time to set an explicit size is when the icon is rendered outside a primitive that handles it (a bare <HeartIcon className="size-5" /> in a marketing hero, for example), or when you're intentionally diverging from the variant default.