Icons are the brand’s shorthand. A player should know they’re looking at a deposit limit, a house-edge explainer, or a helpline before they read the label. The Playbook set keeps that recognition consistent across every screen and surface — and it does so with a single structural idea borrowed straight from the wordmark.
The dual stroke-weight system
The logo splits “Playbook” into two weights: Play at Inter 800 and BOOK at Inter 300. Every icon repeats that contrast with two stroke weights inside the same drawing.
2px
Primary strokes
Outer containers, main shapes, defining structure — the “Play” weight that carries the silhouette.
1px
Detail strokes
Inner details, accents, secondary elements — the “BOOK” weight that adds meaning without noise.
That two-to-one contrast builds a hierarchy inside each icon — the eye reads the structure first, the detail second — and ties the whole set to the wordmark’s design language. The contrast is obvious at 24px and still perceptible at 16px.
The icon library
The full set, organized into the six categories below. Each one is drawn on a 24 × 24 canvas and inherits its color from the surrounding text, so a single file works in navy on a card, white on a dark banner, or teal as an interactive accent. Every icon is downloadable from the Playbook asset library.
Game types
One mark per game family, so a player recognizes the activity before they read a word.
Odds & math
The numbers behind the game — probability, house edge, and randomness made visual.
Player tools
The control surface — limits, budgets, timers, and the confirmations that reward using them.
Content & education
The literacy layer — quizzes, myth-busting, verified facts, and explainers.
Social & sharing
The social pillar — sharing, challenges, scores, and quick mobile linking.
Support & safety
The help layer — calm, clear marks for helplines, warnings, and crisis resources.
How they’re built
Every icon follows the same construction, which is what keeps the set coherent. The stroke weight lives on grouped paths inside each file — never on the root element — so the 2:1 ratio scales cleanly when you change only the width and height.
| Property | Value |
|---|---|
| Style | Weight-contrast outlined (dual stroke) |
| Primary stroke | 2px — containers, structure |
| Detail stroke | 1px — accents, inner elements |
| Stroke color | currentColor (inherits from the parent) |
| Fill | none (except dots and pips) |
| Line cap / join | Round |
| Canvas | 24 × 24 px |
| Optical sizes | 16, 24, 32, 48 px |
Color by inheritance
Because each icon draws with stroke="currentColor", it picks up the CSS color of
whatever element it sits in. There’s no recoloring step and no separate dark-mode file — set the
parent’s color and the icon follows. Pair that with the brand
palette and the set stays on-brand everywhere — as it does in the live
interactive Brand Book.
NavyTeal accentOrange CTAWhite on darkUsing the set well
- Keep the dual stroke weight — it’s the brand signature.
- Set color on the parent and let the icon inherit it.
- Resize by changing width and height; leave the viewBox at 24.
- Reach for an optical size (16 / 24 / 32 / 48) that fits the layout.
- Flatten the two weights into a single uniform stroke.
- Hard-code a fill color that breaks inheritance.
- Bake an icon into a button at a size below 16px.
- Mix in third-party icons that don’t share the construction.