picto

In Windows93, a picto is a small 16x16 or 32x32 component that serves as an icon. These icons mostly represent files.

Usage: Picto uses the ui-picto component. The value prop is the picto's identifier (if a native picto) or the path to a custom image. The size prop is the size of the picto in pixels (default is 16).

Rendering logic

tip

Rendering logic is handled by /42/ui/media/picto.js

Picto checks for the following in order:

"transparent"
SVG pictos
Custom pictos (blobs and URLs)
Native pictos (valid icon names, handled by the iconsManager)

Most interestingly, a picto can either be a <svg> or a <img>.

Custom Pictos

Any image file can be used as a picto. Most notably, the windows93 logo does not have a native picto, but you can use /c/users/windows93/pictures/logo/windows93.png as the picto value.

Image Pictos

Here are the valid icons. With the exception of transparent, These are located in /42/assets/icons.

transparent
ani
cue
cur
pdf
url
img_chd
manifest.json5
run
mail
mixer
config
generic
install
package
session
standby
calendar
programs
settings
shutdown
documents
search-file
www[]().youtube.com
font
text
audio
image
model
video
application
folder
user-trash
folder-open
folder-fonts
folder-desktop
user-trash-full
network-workgroup
folder-development
folder-sound-symbolic
audio-on
audio-off
mouse
computer
joystick
keyboard
drive-storage
drive-harddisk
help
info
error
warning
question
forbidden
css
gif
png
xml
html
jpeg
midi
wasm
webp
x-nfo
x-ansi
x-icon
svg+xml
markdown
javascript
json_json5
octet-stream
zip_gzip_x-tar_x-7z-compressed_vnd.rar

SVG Pictos

These are single-color (black) pictos. They are best suitable for 16x16 icons. View renderings here. They are located in /42/assets/img/pictos.svg

file
file-new
file-export
file-import
file-pile
file-stack
file-duplicate
import
export
presets
folder
folder-new
folder-export
folder-import
folder-pile
folder-stack
folder-duplicate
folder-open
folder-search
save
save-new
save-export
save-import
save-pile
save-stack
save-duplicate
magnifier
magnifier-plus
magnifier-minus
disk
disk-new
disk-export
disk-import
disk-pile
disk-stack
disk-duplicate
vinyl
disk-dark
smiley
globe
circle
sphere
envelope
envelope-new
envelope-export
envelope-import
envelope-pile
envelope-stack
envelope-duplicate
envelope-open
cube
stack
box
database
database-new
database-export
database-import
input
cursor
aim
user
user-new
image
terminal
window
desktop
minimize
maximize
restore
close
help
info
menu
home
key
puzzle
bookmark
flag
bolt
pin
cog
wrench
briefcase
leaf
skull
bug
trash
shield
lightbulb
clock
calendar
calculator
stats
fast
slow
test
chip
compas
screen
laptop
tablet
mobile
printer
photo
joystick
gamepad
gamepad-2
keyboard
mouse
stylus
touch
paperclip
pencil
pen
paintbrush
eyedropper
magic
eraser
tint
paintbucket
palette
crop
lasso
selection
font
bold
italic
strike
underline
ol
ul
text-left
text-center
text-right
text-justify
clear
exit
undo
redo
cut
copy
clipboard
quote
code
json
link
link-off
forbidden
power
location
preserve-case
replace
replace-all
regex
match-word
heart
heart-half
heart-full
lock
lock-open
eye
eye-off
volume
volume-off
camera
camera-off
mic
mic-off
play
pause
stop
backward
forward
fast-backward
fast-forward
eject
loop-old
shuffle-old
left-right
up-down
move
shuffle
shuffle-all
loop
loop-all
loop-one
play-one
play-all
play-all-alt
dice-1
dice-2
dice-3
dice-4
dice-5
dice-6
dice-black-1
dice-black-2
dice-black-3
dice-black-4
dice-black-5
dice-black-6
letter-a
letter-b
faders
crossfader
megaphone
factory
note
note-off
fade-in
fade-out
trianglewave
sinewave
squarewave
sawwave
rampwave
wave
drum
piano
pedal
metronome
midi
bypass
jack-socket
jack-socket-empty
jack
outlet
inlet
outlet-alt
inlet-alt
arrow-output
arrow-input
gamepad-dpad
gamepad-dpad-up
gamepad-dpad-right
gamepad-dpad-down
gamepad-dpad-left
gamepad-button
gamepad-button-4
gamepad-button-2
gamepad-button-1
gamepad-button-3
gamepad-select
gamepad-start
gamepad-home
gamepad-lt
gamepad-lb
gamepad-rb
gamepad-rt
gamepad-left-stick
gamepad-right-stick
plus-thin
plus-thin-xl
plus
check-thin
check
check-2
bullet
bullet-grid
split
split-vertical
split-details
split-grid
split-tree
minus-thin
minus-thin-xl
minus
cross-thin
cross
cross-2
bullet-small
bullet-list
bars
bars-vertical
details
grid
tree
square-dots
square-border-dots
plus-border-dots
minus-border-dots
expand-all-2
collapse-all-2
shrink
shrink-2
shrink-3
grab-thick
grab
mirror
ellipsis
square
square-border
plus-border
minus-border
expand-all
collapse-all
grow
grow-2
grow-3
grab-thick-vertical
grab-vertical
mirror-vertical
ellipsis-vertical
up-xs
right-xs
down-xs
left-xs
arrow-down-to-right
arrow-left-to-down
arrow-up-to-left
arrow-right-to-up
arrow-cw
arrow-cw-2
arrow-cw-3
arrow-cw-4
up
right
down
left
arrow-down-to-left
arrow-right-to-down
arrow-up-to-right
arrow-left-to-up
arrow-ccw
arrow-ccw-2
arrow-ccw-3
arrow-ccw-4
caret-up
caret-right
caret-down
caret-left
arrow-up
arrow-up-right
arrow-right
arrow-down-right
arrow-down
arrow-down-left
arrow-left
arrow-up-left
caret-up-xs
caret-right-xs
caret-down-xs
caret-left-xs
arrow-stop-up
arrow-stop-up-right
arrow-stop-right
arrow-stop-down-right
arrow-stop-down
arrow-stop-down-left
arrow-stop-left
arrow-stop-up-left
caret-up-xxs
caret-right-xxs
caret-down-xxs
caret-left-xxs
arrow-thin-up
arrow-thin-up-right
arrow-thin-right
arrow-thin-down-right
arrow-thin-down
arrow-thin-down-left
arrow-thin-left
arrow-thin-up-left

Custom Pictos​

Image Pictos​

SVG Pictos​

Custom Pictos

Image Pictos

SVG Pictos