Iconography

Three layers — pick by role, not by size alone:

Layer	Source	Where
Flat icons	Bootstrap Icons 1.11.3 (CDN — Quick start)	System UI: nav, settings, toolbars, row actions, toasts, alerts, empty states (may be larger, still flat)
Textured icons	PNG (transparent) from Sqrl Icon Generator	Tasks, flow nodes, and other entity icons at list or node scale
Paper illustrations	Supplied collage art (hero, dashboard)	Large marketing / welcome surfaces only

Do not mix icon sets, use emoji as icons, or rely on colour without a word (Content, Colors).

Flat icons (system UI)

Bootstrap

Default: filled — prefer Bootstrap’s -fill glyphs where they exist (bi-house-fill, bi-people-fill, bi-check-circle-fill, …). These are flat, monochrome, and inherit text colour (text-muted at rest, text-body on hover).

13–16px in chrome. One icon per sidebar item, table row action, and toolbar control. Icon-only controls need aria-label; labelled buttons put the icon before the text (Buttons). Toast and alert lead icons: Feedback.

Empty states use the same flat set inside a neutral tile (for example bi-inbox-fill at fs-3) — not textured PNGs (Feedback).

Semantic vocabulary (flat)

Home

Accounts

Contacts

Tasks

Activities

Flows

Settings

Notifications

Key step

Needs attention

Use outline Bootstrap icons only where no filled variant fits a control (chevrons, three-dots, pencil). Do not mix filled and outline nav sets in one rail — Navigation.

<i class="bi bi-people-fill text-muted" aria-hidden="true"></i>
<span>Contacts</span>

Sortable table headers: bi-chevron-expand — Table.

Flat icon tiles (fallback)

When no textured PNG exists yet: 34×34px tile, 10px radius, light bg-*-subtle + darker flat glyph. Same palette mapping as below. Modal/offcanvas headers use theme modal-icon with flat glyphs — Modals.

Textured icons

Sqrl custom

Export from Sqrl Icon Generator: Bootstrap icon shape + relief texture, PNG with transparent background. Use for task types, flow nodes, and similar named entities — not for settings, nav, or empty states.

• Do not recolour or re-tint the PNG.
• Flow canvas / nodes: use at 24px or larger on the node surface (no flat glyph substitute at that scale).

Call

Email

Meeting

• 
  Chase signature – Delta Staal

  Van den Berg Logistics · Marieke de Groot
• 
  Draft onboarding plan – Havenstad Groep

  TechBuild · Pieter Janssens

<span
  class="d-inline-flex align-items-center justify-content-center rounded bg-info-subtle flex-shrink-0"
  style="width: 34px; height: 34px"
>
  <img src="/assets/icon-task-call.png" width="24" height="24" alt="" />
</span>

Paper illustrations

Large paper-collage art (dashboard welcome, campaign hero) sits behind or beside functional content — never as chrome. When building an app, reserve a placeholder region (fixed aspect ratio, bg-body-secondary or neutral panel); drop in supplied artwork later. Do not ask implementation tools to generate these illustrations in place of real assets.

Rules

• Flat / filled Bootstrap Icons for all system UI, including large empty-state icons.
• Textured PNGs from design.sqrl.nl/icons for tasks, flow nodes, and entity lists — not recoloured.
• Illustrations for hero-scale only; use a placeholder container until art is supplied.
• Never: emoji, mixed sets, colour-only meaning, hand-drawn SVG substitutes for generator icons.
• Icon-only: aria-label. Labelled buttons: icon before text.
• Related: Navigation, Buttons, Feedback