The yellow folder ★ signature icon
18 · list
32 · grid
72 · hero
The single most-recognizable shape in put.io.
ph-folder-fill 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.
Default
ph-folder-fill
Shared
+ users badge
Loading
opacity .55 + pulse
Locked
+ lock badge
Empty
ph-folder (outline)
Icon system Phosphor · regular weight
Everything except the yellow folder uses Phosphor Icons, regular weight, at a neutral grey. Reserve filled/bold weights for active nav states and yellow tint for the three brand-critical metaphors below. CDN: unpkg.com/@phosphor-icons/web.

The three metaphors must stay visually distinct

Save to put.io
ph-upload-simple
Adding content to the cloud — magnets, URLs, torrents, browser extension saves.
Download to device
ph-download-simple
Pulling a file from put.io down to this machine. Never the same glyph as "save".
Stream / play
ph-play
Watching in place — player, TV app, inline preview. Always filled triangle.
These three were the single most-cited UX bug in user interviews when ambiguous. Never reuse the same glyph across two of them.

File & folder actions

folder
folder-plus
folder-open
file
file-video
file-audio
file-zip
file-text
file-pdf
file-code
image
images
magnet-straight
link
link-simple
share-network
share-fat
users
user-plus
trash
copy
clipboard
pencil-simple
star
star · fill
heart
tag
bookmark
lock
lock-open
eye
eye-slash

Transfers & playback

upload-simple
download-simple
play
pause
stop
skip-forward
skip-back
fast-forward
rewind
shuffle
repeat
queue
arrows-clockwise
arrow-counter-clockwise
check-circle
x-circle
warning
warning-octagon
broadcast
rss
television
television-simple
device-mobile
device-tablet
monitor
speaker-high
speaker-low
speaker-x
closed-captioning
subtitles
corners-out
cast-screen

UI & navigation

house
magnifying-glass
list
squares-four
rows
columns
funnel
sliders
gear
gear-six
user-circle
bell
bell-slash
envelope
chat-circle
dots-three-vertical
dots-three
caret-up
caret-down
caret-left
caret-right
arrow-up
arrow-down
arrow-left
arrow-right
arrow-up-right
arrows-out
plus
minus
x
check
question
info
sign-out
sign-in
power

Status, storage & system

cloud
cloud-arrow-up
cloud-arrow-down
cloud-check
hard-drive
database
wifi-high
wifi-slash
globe
shield
shield-check
key
clock
clock-history
calendar
spinner
circle-notch
lightning
flame
fingerprint
qr-code
trend-up
trend-down
chart-bar
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.
Don't
✕
Don't recolor the folder.
Always yellow.
✕
Don't use Phosphor duotone.
Stick to regular & fill.
✕
📁 ⬇️ ▶️
Don't use emoji as icons —
renders differently everywhere.