Notifications2 new
View all-
Unread. Alex Reyes14:02
Uploaded Brand guidelines v3 for Atelier. Please check the type pages before the 15:00 review.
-
Unread. Jon Reyes12:40
Moved Nova to At risk: the campaign go-live still waits for the client sign-off on the hero visuals.
-
Ana Petit11:15
Added 12 photos from the Kiln product shoot to the Asset library.
-
Sara Ortiz10:05
The Lume printer confirmed dielines for Tuesday noon. Bleed is 3 mm on all panels.
-
Leo Park09:20
Orbit app UI is ready for review. The onboarding flow has two options to compare.
ICONS
Filled icons
Solid icons for active, selected and emphasised states.THEME
01
Browser
Search, compare weights, copy/
1512 iconsPreview
WEIGHT
SIZE
COLOUR
Click any icon to compare weights and copy SVG, JSX or class.
Phosphor Icons v2.1.1 · MIT licence · phosphoricons.com02
States
Fill = active, selected, onSidebaroutline idle · filled active
Toggle buttonsaria-pressed · pop on fill
Same glyph, two weights — the shape doesn’t move, only the fill changes.Mobile tab bar5 tabs · centre action
Gallery
Photo cardfavourite · rating
Hero 04
Great
03
Emphasis
Circles, badges, big and duotone iconsIcon in a circlenotifications · 36 px tile
Invoice paidNordic Thread · €11,5802 m
New commentLena on Hero 0415 m
Storage 92 % fullUpgrade or archive old projects1 h
Payment failedVisa •• 4242 declined3 h
Status badgesfilled 14 px + word
PaidPendingOverdueDraftSent
PaidPendingOverdueFeatured
Tinted for lists, solid for headers. Dark ink on solid colour keeps 4.5 : 1.Big iconsempty states · onboarding
No selects yetStar frames while culling — they’ll appear here.
Shoot
Select
Deliver
Duotoneshape + 20 % fill
For illustrations and feature cards — not for small UI controls.
04
Rules & a11y
When to fill, checklist, Do / Don’tWhen to fill
Toggles that are ONLike, favourite, saved, notifications on
The current placeActive sidebar item, active tab
Small status marksBadges and notification circles at 14–20 px
RatingsFilled up to the value, outline after
Big illustrative iconsUse duotone, 40 px and up
Checklist
✓aria-pressed on togglesthe fill shows state visually; aria-pressed tells assistive tech
✓aria-current on active navnot just a filled icon
✓Same glyph, both weightsswitching weight must not shift layout
✓Contrast on solid badgesdark ink on colour ≥ 4.5 : 1
✓Decorative = aria-hiddenlabels carry the meaning
DO✓Fill only the active or selected item✓Keep outline and fill from the same family✓Pair filled status icons with a word✓Use duotone for empty states and features
DON’T✕Fill every icon in a toolbar✕Mix Lucide outline with Phosphor fill in one row✕Use fill alone to show state✕Put duotone icons in small buttons