The yellow folder
signature icon
18 · list
32 · grid
72 · hero
The single most-recognizable shape in put.io.
ph-fill ph-folder tinted var(--yellow-solid). Every file browser on every
platform uses this exact icon.
Don't tint it anything but yellow, state is expressed via overlay glyphs or weight swaps.
Don't tint it anything but yellow, state is expressed via overlay glyphs or weight swaps.
Default
ph-fill ph-folder
Shared
+ users badge
Loading
opacity .55 + pulse
Locked
+ lock badge
Empty
ph-folder (outline)
Icon system
Phosphor · regular weight
Phosphor Icons, regular weight. Tint is contextual.
Utility icons (nav, toolbars, settings, history, menus) sit at --text-secondary or the surface text colour. Every file-type icon is --yellow-solid, folder through archive alike, via --file-row-icon. TV uses yellow throughout.
Filled and bold weights are reserved for active nav states. CDN: unpkg.com/@phosphor-icons/web.
Utility icons (nav, toolbars, settings, history, menus) sit at --text-secondary or the surface text colour. Every file-type icon is --yellow-solid, folder through archive alike, via --file-row-icon. TV uses yellow throughout.
Filled and bold weights are reserved for active nav states. CDN: unpkg.com/@phosphor-icons/web.
The three metaphors must stay visually distinct
These three were the single most-cited UX bug in user interviews when ambiguous. Never reuse
the same glyph across two of them.
Sizes & weights
14 · dense list
16 · default UI
20 · toolbar
24 · nav
32 · TV
thin
regular
bold
fill · active
Default weight is regular. Use fill only for active tab states and the three brand metaphors.
Avoid duotone entirely, it clashes with the yellow folder's flat aesthetic.
Avoid duotone entirely, it clashes with the yellow folder's flat aesthetic.
Don't
Don't recolor the folder.
Always yellow.
Always yellow.
Don't use Phosphor duotone.
Stick to regular & fill.
Stick to regular & fill.
Don't use emoji as icons,
they render differently everywhere.
they render differently everywhere.