Common Symbols in Software User Interfaces
February 2026 · 6 minute read
Posted in: Software,
If you are not used to use software, some things won't come naturally.
<details> When it’s text, reading helps, like in many other
subjects… <p><img src="/commonIcons/prof-and-kyle.gif" alt="GIF of
Tolarian Community College Professor telling Kyle Hill “Reading the
Card Explains the Card”"></p> </details>
Try to read the screen first, before clicking stuff.
But with abstract images, you are out of luck. Some buttons only show
symbols, and Grafical User Interfaces (GUI) many times are not
accesible enough to newbies, specially mobile GUIs.
Just in case someone finds this and needs it:
Here is a generic guide, telling you most common uses of these symbols
in buttons. If my definitions sound too generic, it's because software
is very varied.
A long horizontal bar with a symbol on the right.
Many time that symbol is a circle ○. A minimalistic text field to send
messages somewhere. Clicking the symbol or pressing Enter sends it.
Airplane
✈
Button to toggle airplane mode (deactivating wireless connections).
Arrows
← → ↓ ↑
Arrows, a line and a incomplete triangle in one of its ends, pointing
somewhere.
- ← (left) means going back. For example, if you want to return
somewhere in the menus.
- → (right) means going forward. For example, you want to continue a
form.
- ↓ (down) means going to the bottom, like when you are reading a
bookpage.
- ↑ (up) means going up, like when you are reading a bookpage and want
to re-read the start.
Bell
🔔
Check your notifications.
Bug
🪳
Usually looks like a cockroach. To report software errors, known as
bugs.
Camera
📷
Kinda retro. Take a photo. Cheese!
Check mark
✔
Depending on context:
1. Mark something as done or read.
2. An indicator about messages. One check mark [✔] means your message
was sent. Two [✔✔], it was recieved. Sometimes, a different colored
✔✔ means the recipient read it.
Cloud
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
An abstract cloud with an arrow pointing up to it
i <path d="M23.845 8.124c-1.395-3.701-4.392-6.045-8.921-6.045-5.
g>
A cloud indicates something saved online, on the internet. An arrow
pointing up TO the cloud means uploading to the internet. An arrow
pointing down means downloading from the internet.
Cog or tools
⚙ 🔧
It can have different styles. An configuration menu.
Circular arrows
⟳ ⟲
Circular arrows. Depending on context:
1. Undo and redo actions. Like Ctrl-Z and Ctrl-Shift-Z keyboard
shortcuts.
2. Reload action. If you see it as an non-interactive animation, it's
already loading something.
Coffee/tea cup
☕
A tipping/donation button. Would you like to tip me? ☕😁 [1]
Compass
🧭
Kinda retro with smartphones. Those devices to find the north. An
explore tab, to discover new content in social media. Rarely used like
a target [2].
Diskette or Floppy Disk
💾
Extremely retro. It saves changes. Don't forget it, you don't wanna
start all over again!
Envelopes
✉
Those folded papers you use to send letters. Usually they represent
messages directed to you, sometimes specifically e-mails. An open
envelope means you've already read it.
Funnel
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
An abstract funnel
<path d="M12,25l6.67,6.67a1,1,0,0,0,.7.29.91.91,0,0,0,.39-.08,1,1,0,0,0,.61-.92V13.08L31.71,1.71A1,1,0,0,0,31.92.62,1,1,0,0,0,31,0H1A1,1,0,0,0,.08.62,1,1,0,0,0,.29,1.71L11.67,13.08V24.33A1,1,0,0,0,12,25ZM3.41,2H28.59l-10,10a1,1,0,0,0-.3.71V28.59l-4.66-4.67V12.67a1,1,0,0,0-.3-.71Z"/> </svg>
It opens a filter menu.
Happy face
☺
It is usually an emoji selector. Those yellow faces, people and
colorful icons you add in text.
Hearts and Stars
♡ ♥ ☆ ★
Symbolic versions. It's related to actions that indicate you like
something. Empty versions ♡ ☆ means you haven't pressed it, ♥ ★ full
versions, you did.
Keyboard
⌨
A rectangle with dots and a line inside. It toggles the keyboard.
Magnifying glass
🔍
A circle and a line. A button to search something.
Media controls
This are the most minimalistic and common, they get their own section.
Triangle pointing right
▶
Play button. Start playing that media.
Two vertical rectangles
⏸
Pause button. So you can continue later ASAP.
Both above
⏯
Toggle. Pause or play depending of context.
Square
⏹
Stop button. You don't want to continue soon.
Two triangles and vertical line to the right
⏭
Next track button. Skip to the next element. There is a version with
no line, it fast-forwards on the same file.
Two triangles and vertical line to the left
⏮
Previous track button. Skip to the previous element. There is a
version with no line, it fast-backwards on the same file.
Circle
⏺
Recording button. Remember consent!
Rectangle and triangle pointing up
⏏
Eject button. Most relevant when you are using physical media.
Two arrows forming an oval
🔁
Repeat reproducing the list indefinitely.
🔂
Next to a 1, repeat reproducing the file indefinitely.
Two curved arrows forming a cross
🔀
Shuffle mode. The next track is chosen randomly.
Menu icons
≡ ⁝
Three horizontal lines ordered in a column ≡, is known as a hamburger
menu (like I said, very abstract). ≡ is usually a main menu to the
software.
On the other hand, three points ordered in a column ⁝ is a menu for a
specific element, context sensitive.
Paper plane
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
An abstract paper plane
<path d="M28.784 3.226l-10.508 24.556-3.729-10.766-10.756-3.251zM31.389 0.024c-0.191 0-0.422 0.054-0.691 0.167l-29.833 12.659c-1.075 0.456-1.143 1.335-0.151 1.952l12.353 3.862 4.043 12.602c0.29 0.474 0.64 0.71 0.977 0.71 0.373 0 0.728-0.286 0.97-0.852l12.759-29.804c0.346-0.809 0.149-1.296-0.426-1.296z"></path> </svg>
It sends the message or file you have attached.
Person portrait
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
An abstract person portrait
<path d="M15.992 2c3.396 0 6.998 2.86 6.998 4.995v4.997c0 1.924-0.8 5.604-2.945 7.293-0.547 0.43-0.831 1.115-0.749 1.807 0.082 0.692 0.518 1.291 1.151 1.582l8.703 4.127c0.068 0.031 0.834 0.16 0.834 1.23l0.001 1.952-27.984 0.002v-2.029c0-0.795 0.596-1.045 0.835-1.154l8.782-4.145c0.63-0.289 1.065-0.885 1.149-1.573s-0.193-1.37-0.733-1.803c-2.078-1.668-3.046-5.335-3.046-7.287v-4.997c0.001-2.089 3.638-4.995 7.004-4.995zM15.992-0c-4.416 0-9.004 3.686-9.004 6.996v4.997c0 2.184 0.997 6.601 3.793 8.847l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h27.986c1.105 0 1.999-0.895 1.999-1.999v-3.001c0-1.175-1.999-1.999-1.999-1.999l-8.703-4.127c2.77-2.18 3.708-6.464 3.708-8.865v-4.997c0-3.31-4.582-6.995-8.998-6.995v0z"></path> </svg>
In its own, usually your account and/or user menu. If you aren't
logged in, it'll prompt you to log/sign in (when you already have an
account) or sign up (create an account).
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
An abstract person portrait and a plus symbol
<path d="M2.002 27.959c0-0.795 0.597-1.044 0.835-1.154l8.783-4.145c0.63-0.289 1.064-0.885 1.149-1.573s-0.193-1.37-0.733-1.803c-2.078-1.668-3.046-5.334-3.046-7.287v-4.997c0-2.090 3.638-4.995 7.004-4.995 3.396 0 6.997 2.861 6.997 4.995v4.998c0 1.924-0.8 5.604-2.945 7.292-0.547 0.43-0.831 1.115-0.749 1.807 0.082 0.692 0.518 1.291 1.151 1.582l2.997 1.422 0.494-1.996-2.657-1.243c2.771-2.18 3.708-6.463 3.708-8.864v-4.997c0-3.31-4.582-6.995-8.998-6.995s-9.004 3.686-9.004 6.995v4.997c0 2.184 0.997 6.602 3.793 8.846l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h21.997v-2l-21.996 0.001v-2.029zM30.998 25.996h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path> </svg>
If it is with a + (plus) symbol, it adds an user to something.
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
An abstract person portrait and a cross symbol
<path d="M24.973 11.995l0-4.997c0-3.31-4.582-6.995-8.997-6.995s-9.004 3.686-9.004 6.995v4.997c0 2.184 0.997 6.601 3.793 8.846l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h18.998v-2l-18.997 0.001v-2.029c0-0.795 0.597-1.045 0.835-1.154l8.782-4.145c0.63-0.289 1.064-0.886 1.149-1.573s-0.193-1.369-0.733-1.803c-2.078-1.668-3.046-5.334-3.046-7.287v-4.997c0-2.090 3.638-4.995 7.004-4.995 3.396 0 6.997 2.861 6.997 4.995v4.997c0 1.924-0.8 5.604-2.945 7.292-0.548 0.43-0.832 1.114-0.749 1.806 0.081 0.692 0.517 1.291 1.151 1.582l0.566 0.261 0.877-1.619-0.609-0.46c2.77-2.179 3.708-6.462 3.708-8.862zM28.895 27.463l2.828-2.829c0.39-0.39 0.39-1.023 0-1.414s-1.024-0.39-1.414 0l-2.829 2.829-2.828-2.829c-0.39-0.39-1.024-0.39-1.414 0s-0.39 1.024 0 1.414l2.828 2.828-2.828 2.828c-0.39 0.39-0.39 1.024 0 1.415 0.39 0.389 1.024 0.389 1.414 0l2.828-2.828 2.828 2.828c0.39 0.389 1.024 0.389 1.414 0 0.391-0.39 0.391-1.024 0-1.415z"></path> </svg>
With a - (minus) or ✕ (X cross) symbol, it removes an user.
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
An abstract person portrait and a checkmark symbol
<path d="M1.984 29.992l0-2.029c0-0.795 0.597-1.045 0.835-1.154l8.783-4.145c0.63-0.289 1.064-0.885 1.149-1.573s-0.193-1.37-0.733-1.803c-2.078-1.668-3.046-5.335-3.046-7.287v-4.997c0-2.090 3.637-4.995 7.004-4.995 3.396 0 6.998 2.861 6.998 4.995v4.997c0 1.924-0.8 5.604-2.945 7.293-0.547 0.43-0.831 1.115-0.749 1.807 0.082 0.692 0.518 1.291 1.151 1.582l5.070 2.414 1.192-1.69-5.427-2.542c2.771-2.18 3.708-6.464 3.708-8.865v-4.997c0-3.31-4.582-6.995-8.998-6.995s-9.004 3.686-9.004 6.995v4.997c0 2.184 0.997 6.601 3.793 8.847l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h19.991l-1.625-2zM31.632 22.61c-0.434-0.341-1.064-0.264-1.404 0.171l-4.276 6.522-2.658-2.659c-0.39-0.39-1.024-0.39-1.415 0s-0.39 1.023 0 1.414l3.535 3.535c0.39 0.39 1.023 0.39 1.414 0 0.095-0.095 0.166-0.204 0.215-0.322l4.759-7.259c0.34-0.434 0.263-1.063-0.172-1.403z"></path> </svg>
With a checkmark, it indicates an action is already done with them
(like they are already added).
Sharing icons
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
Share icon of a square with a curved arrow pointing up and right
<path d="M28.183 29.668h-26v-20h8.050l2.023-1.948-0.052-0.052h-10.021c-1.105 0-2 0.896-2 2v20c0 1.105 0.895 2 2 2h26c1.105 0 2-0.895 2-2v-15.646l-2 1.909v13.737zM8.442 21.668l2.015-0c1.402-7.953 8.329-14 16.684-14 0.351 0 0.683 0.003 1.019 0.005l-3.664 3.664c-0.39 0.39-0.39 1.024 0 1.414 0.195 0.196 0.452 0.293 0.708 0.293s0.511-0.098 0.706-0.293l5.907-6.063-5.907-6.064c-0.39-0.391-1.023-0.391-1.414 0-0.39 0.391-0.39 1.024 0 1.414l3.631 3.63c-0.314-0-0.624-0.002-0.944-0.002-9.47 0-17.299 6.936-18.741 16.001z"></path> </svg>
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
Share icon of three circles and two lines forming an acute angle
<path d="M27 22c-1.646 0-3.103 0.8-4.013 2.028l-13.168-6.71c0.114-0.421 0.181-0.86 0.181-1.317 0-0.572-0.101-1.119-0.277-1.63l13.242-6.426c0.909 1.244 2.375 2.056 4.035 2.056 2.762 0 5-2.239 5-5s-2.238-5-5-5-5 2.239-5 5c0 0.388 0.049 0.764 0.133 1.127l-13.432 6.518c-0.915-1.009-2.231-1.646-3.7-1.646-2.761 0-5 2.239-5 5s2.239 5 5 5c1.59 0 3.004-0.744 3.92-1.902l13.222 6.739c-0.090 0.374-0.142 0.762-0.142 1.163 0 2.761 2.238 5 5 5s5-2.239 5-5-2.238-5-5-5zM27 2c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM5 19c-1.657 0-3-1.343-3-3s1.343-3 3-3c1.657 0 3 1.344 3 3s-1.343 3-3 3zM27 30c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path> </svg>
2 different sharing icons. Its button shares information from the
software you are using to a different one.
Speaker (device)
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
Abstract speaker (device) icon with a curve next to it.
<path d="M20.462 2.059c-0.326-0.173-0.721-0.154-1.029 0.053l-10.034 7.878-3.332 0.002c-1.704 0-3.090 1.208-3.090 2.7l0.054 6.598c0 1.486 1.386 2.695 3.089 2.695l3.331 0.002 9.981 7.898c0.168 0.113 0.363 0.171 0.559 0.171 0.161 0 0.323-0.039 0.469-0.117 0.327-0.173 0.532-0.512 0.532-0.883v-26.115c-0-0.369-0.204-0.709-0.53-0.883zM18.991 27.176l-8.675-7.016c-0.165-0.111-0.36-0.171-0.559-0.171l-3.637-0.002c-0.642 0-1.090-0.366-1.090-0.702l-0.053-6.598c0-0.328 0.448-0.693 1.090-0.693l3.638-0.002c0.198 0 0.393-0.059 0.558-0.171l8.729-7v22.355zM24.682 10.864c-0.553-0.091-1.061 0.277-1.152 0.822s0.277 1.060 0.822 1.151c1.573 0.262 2.671 1.635 2.671 3.336 0 1.62-1.137 3.021-2.703 3.334-0.542 0.108-0.893 0.634-0.785 1.176 0.095 0.476 0.512 0.805 0.98 0.805 0.064 0 0.131-0.006 0.197-0.020 2.499-0.497 4.313-2.725 4.313-5.295-0-2.657-1.826-4.89-4.341-5.309z"></path> </svg>
Sound volume related. The one with most curves lines raises the
volume, the other lowers it.
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
Abstract speaker (device) icon with a X cross next to it.
<path d="M17.985 2.059c-0.326-0.173-0.721-0.154-1.028 0.053l-10.034 7.878-3.332 0.002c-1.704 0-3.090 1.208-3.090 2.7l0.053 6.598c0 1.486 1.386 2.695 3.089 2.695l3.331 0.002 9.981 7.898c0.168 0.113 0.363 0.171 0.559 0.171 0.161 0 0.323-0.039 0.469-0.117 0.327-0.173 0.532-0.512 0.532-0.883v-26.115c0-0.369-0.204-0.709-0.53-0.883zM16.516 27.176l-8.675-7.016c-0.165-0.111-0.36-0.171-0.559-0.171l-3.637-0.002c-0.642 0-1.090-0.366-1.090-0.702l-0.054-6.598c0-0.328 0.448-0.693 1.090-0.693l3.638-0.002c0.199 0 0.393-0.059 0.558-0.171l8.729-7v22.355zM27.938 16.016l3.269-3.308c0.39-0.39 0.39-1.024 0-1.414s-1.023-0.39-1.414 0l-3.261 3.299-3.261-3.299c-0.39-0.39-1.023-0.39-1.414 0s-0.39 1.024 0 1.414l3.268 3.308-3.238 3.276c-0.39 0.39-0.39 1.024 0 1.414s1.024 0.39 1.415 0l3.229-3.267 3.229 3.267c0.39 0.39 1.023 0.39 1.414 0s0.39-1.024 0-1.414z"></path> </svg>
If it is next to a X cross, it mutes the sound.
Tag
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
Abstract shopping tag.
<path d="M31.999 13.008l-0-10.574c0-1.342-1.092-2.434-2.433-2.434h-10.793c-0.677 0-1.703 0-2.372 0.67l-15.81 15.811c-0.38 0.38-0.59 0.884-0.59 1.421 0 0.538 0.209 1.043 0.589 1.423l12.088 12.085c0.379 0.381 0.883 0.59 1.421 0.59s1.042-0.209 1.421-0.589l15.811-15.812c0.678-0.677 0.674-1.65 0.67-2.591zM29.915 14.186l-15.826 15.811-12.086-12.101 15.794-15.797c0.159-0.099 0.732-0.099 0.968-0.099l0.45 0.002 10.35-0.002c0.239 0 0.433 0.195 0.433 0.434v10.582c0.002 0.38 0.004 1.017-0.084 1.169zM24 4c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4s-1.791-4-4-4zM24 10c-1.105 0-2-0.896-2-2s0.895-2 2-2 2 0.896 2 2-0.895 2-2 2z"></path> </svg>
Related to tags and hashtags. They help to find content later, by you
or others.
Targets
⌖𖣠◉
A shooting target. In navigation apps, centers the view on your
position. In others, gives your geographical position to look up
something.
Telephone reciever
📞
Very retro. Used to make calls. Also, as an indicator next to other
symbols, shows previous call events.
📞→ A call you made.
📞← A call you recieved.
📞✕ A missed or cancelled call.
Thumbs up-down
👍👎
Up if you like something, down if you dislike it.
Trashcan
🗑
It deletes things, or shows things in the trashcan.
Trophy
🏆
Shows achievements. Most common in games.
Wallet
HTML svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"
Abstract wallet.
<path d="M31.989 9.078c0.015-0.739-0.184-2.464-2.433-3.064l-22.576-4.519c-1.655 0-3 1.345-3 3v4.022l-1-0.002c-1.649 0.007-2.989 1.348-2.989 2.999v15.994c0 1.654 1.345 3 3 3h26.014c1.654 0 3-1.346 3-3zM5.981 4.494c0-0.522 0.402-0.952 0.913-0.996l22.063 4.465c0.008 0.004-0.164 0.56-0.965 0.55h-22.011zM30.008 27.507c0 0.552-0.448 1-1 1h-26.015c-0.552 0-1-0.448-1-1v-15.995c0-0.552 0.448-1 1-1h25.002c0.982 0 2.012-0.335 2.012-0.996v17.991h0zM5.995 17.516c-1.104 0-2 0.895-2 2s0.896 2 2 2 2-0.895 2-2-0.896-2-2-2z"></path> </svg>
Payment methods administration. Careful!
X cross
✕
It closes a section/windows or cancels an action. Sometimes inside a
circle or square.
Nerdy info.
I tried to use Unicode symbols as much as possible in this guide, they
have descriptions already in TTS and similar software AFAIK. Vectors
and icons by Orchid [3] in MIT License via
https://github.com/orchidsoftware/icons [4]
References:
DIR [1] Would you like to tip me? ☕😁
HTML [2] a target
HTML [3] Orchid
HTML [4] https://github.com/orchidsoftware/icons
Secciones:
DIR Home
DIR Posts (Feed)
DIR Casa
Links:
HTML Mail
DIR Home
skrlet13 CC-BY-SA para posts
___________________________________________________________________
Gophered by Gophernicus/3.1.1 on OpenBSD/amd64 7.8