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.
Default
ph-fill ph-folder
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
screencast

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

Media, file types & content

film-slate
film-strip
film-reel
popcorn
video
video-camera
music-note
music-notes
vinyl-record
microphone
headphones
playlist
waveform
picture-in-picture
frame-corners
gif
file-cloud
file-arrow-down
file-search
file-x
file-dashed
file-plus
file-jpg
file-doc
file-xls
file-csv
file-html
folder-simple
folders
folder-star
folder-lock
folder-user

Account, premium & sharing

crown
crown-simple
seal-check
seal-percent
gift
ticket
wallet
coins
user
user-gear
users-three
paper-plane-tilt
link-break
password
puzzle-piece
plugs-connected
plug
browser
browsers
app-window
game-controller
rocket-launch
sparkle
confetti
hand-waving
smiley
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.
random platform emoji (folder) random platform emoji (download) random platform emoji (play)
Don't use emoji as icons —
renders differently everywhere.