Icons & logos

Lucide only, at four sizes, swapped never redrawn; the marks are assets — the corporate one, the products’, and Pepper’s own — placed from a file, never re-drawn.

Sizes

	Token	Value	What it is for
	size/icon/16	16px	inside a button, a nav item, a table cell
	size/icon/24	24px	a card chip, an icon list, a KPI detail
	size/icon/32	32px	a deck icon chip
	size/icon/48	48px	a feature card on a slide

The Lucide subset — every glyph in the file, at 24

activity · anchor · app-window · app-window-mac · archive · arrow-down · arrow-down-wide-narrow · arrow-left · arrow-left-right · arrow-right · arrow-up · arrow-up-down · arrow-up-narrow-wide · arrow-up-right · atom · award · badge-check · badge-dollar-sign · ban · banana · banknote · bell · bell-off · bell-ring · binary · book-open · book-open-text · bookmark · bot · boxes · braces · brain · brain-circuit · briefcase-business · bug-off · building-complex · cake · calculator · calendar · calendar-days · calendar-range · camera · chart-bar · chart-bar-stacked · chart-column · chart-column-increasing · chart-line · chart-no-axes-combined · chart-pie · check · chevron-down · chevron-left · chevron-right · chevron-up · chevrons-up-down · circle · circle-alert · circle-arrow-down · circle-arrow-right · circle-check · circle-divide · circle-dollar-sign · circle-dot · circle-pause · circle-play · circle-plus · circle-question-mark · circle-x · clapperboard · clipboard-check · clipboard-list · clock · clock-alert · cloud · cloud-download · cloud-upload · code · cog · coins · columns-2 · columns-3-cog · compass · contact · contrast · copy · cpu · credit-card · crosshair · database · dollar-sign · download · ellipsis · ellipsis-vertical · eraser · external-link · eye · eye-off · file · file-chart-column · file-check · file-down · file-spreadsheet · file-text · file-up · film · fingerprint-pattern · flag · focus · folder · funnel · gamepad-2 · gauge · gavel · gem · gift · git-branch · globe · goal · grip-vertical · hand-coins · handshake · hard-drive · headphones · headset · heart · hourglass · house · image · info · key · key-round · languages · laptop · laptop-minimal · layers · layout-dashboard · layout-grid · life-buoy · lightbulb · link · list · loader-circle · lock · lock-keyhole-open · lock-open · log-in · log-out · magnet · mail · mail-open · map · map-pin · map-pin-off · maximize-2 · megaphone · menu · message-circle · message-square · mic · minimize-2 · minus · monitor · monitor-play · moon · mouse-pointer · mouse-pointer-click · music · navigation · network · newspaper · package · panel-left-close · panel-left-open · paperclip · pencil · percent · phone · piggy-bank · play · plug-zap · plus · pointer · presentation · puzzle · qr-code · radar · radio · radio-tower · receipt · receipt-text · refresh-cw · rocket · rotate-ccw · rotate-ccw-clock · route · route-off · rss · satellite · satellite-dish · save · scan-face · scan-search · scan-text · scissors · search · search-check · send · server · settings · settings-2 · share · share-2 · shield · shield-alert · shield-ban · shield-check · shield-off · shield-x · shopping-bag · shopping-cart · shuffle · sliders-horizontal · sliders-vertical · smartphone · sparkles · speaker · split · square-arrow-out-up-right · square-plus · star · stethoscope · store · sun · table · tablet · tablet-smartphone · tag · target · terminal · text-align-justify · text-align-start · thumbs-down · thumbs-up · timer · toggle-left · trash · trending-down · trending-up · triangle-alert · trophy · tv · tv-minimal · unplug · upload · user · user-check · user-plus · user-round-check · user-round-x · user-star · user-x · users · users-round · venetian-mask · video · volume-2 · volume-off · wallet · wand-sparkles · watch · waypoints · webhook · wifi · workflow · x · zap

In code, the same 276 glyphs are installed, not drawn. @pepperui/css ships the set as one sprite (icons.svg, a <symbol> per glyph) and one file per icon (icons/<name>.svg), from Lucide 1.47.0, the release the set is drawn from. A page writes the name and the component paints it:

<span class="pui-icon pui-icon--24"><svg><use href="/css/pepper-ui/icons.svg#route-off"/></svg></span>

Nothing pasted, nothing site-specific: the ink is the component’s (currentColor), the size is the modifier (16 · 24 · 32 · 48), and a glyph the set lacks is a request to the system, never a file of the page’s own. icons.json lists the names for a swap tool.

Marks

• Logo/Pepper mark
• Logo/Pepper tile - red
• Logo/Pepper mark - inverse
• Logo/Pepper tile - light
• Logo/Mobupps — corporate
• Logo/MAFO — product
• Logo/iRTB — product
• Logo/MobuppsX — product
• Logo/Echo AI — product
• Logo/Echo AI - white — for coloured and dark grounds

The files themselves, to download, are on Brand.

Corporate versus product: a product screen carries its product’s mark in the rail (Sidebar’s slot); the site carries Mobupps, and the deck cover does by default — its logo is a slot that can be swapped; Pepper’s own mark marks the design system and appears in no product. Every mark is an asset placed from Brand/ or assets/logo/ — never re-drawn, never an emoji.

On the Figma page

The four sizes are the placeholder at 16 · 24 · 32 · 48 with their size/icon tokens; the index is every glyph in the file at 24 — swap any slot to one of these by name. The marks are components imported from the SVG files in assets/logo and Brand, so a re-export replaces the component and every instance follows.

The same page in the Figma library: Icons & logos.