100+ Unicode Symbols for HTML/CSS/JS/PHP

This note will cover universal Unicode symbols. Icons that are understood by all browsers and systems.

To use icons in HTML code (markup), icon packages based on fonts are usually installed, for example, Font Awesome. However, it is often more convenient to insert a known Unicode symbol into the browser and not to connect additional fonts. Let's consider such symbols in this note.

Browsers have built-in libraries of available icons and glyphs. They are available in Unicode format, which is a standard that assigns a unique identifier to each special symbol. The number of such symbols (icons, glyphs) is constantly growing, and today there are more than 110,000 of them. However, browsers do not understand all such symbols. Browsers work based on icons available in your system: Windows, Linux, OS X, Android, and iOS.

This note collects icons that are installed in all systems, which means that they can be considered universal and in 99% of cases any browser will understand and display them (however, they will not always look the same).

Look for symbols on the G r a p h e m i c a website.
Look for symbols on the w3schools.com website.

Note: article on character encoding and Unicode.

Also read Notes on SVG - endless number of icons.

How to use Unicode symbols

The symbols provided in the tables below are ordinary characters that can be copied and pasted as if they were letters of text. However, if the file encoding (HTML/CSS) where the copied symbol is pasted is not UTF-8, the pasted symbol will not be displayed, and moreover, it will be lost. In such cases, the HTML code of the symbol is provided in the table.

To use icons, you need to:

Find the desired icon.
Copy the icon or its code.
Paste the copied icon into HTML/JS/PHP as regular text. In CSS, it can be used as the value of the property content:'★';, or as the code content:'\2605';.

Using the code of the icon in different languages. For example, the UTF8 code ◑ = 25D1, then:

CSS                      \25D1
JavaScript / JSON        \u25D1
C / C++ / Java / Python  \u25D1
Perl                     \x{25D1}
Ruby                     \u{25D1}

Symbols are essentially plain text, so they can be styled: shadow, size, color, etc.

Contents:

Icons
Arrows
Quotation Marks
Special
Currency
Weather
Pointers
Fractions
Roman Numerals
Mathematics
Cards
Chess
Folder Tree

Icons

Icon	Decimal	Entity	css	Name
☺	`☺`		`\263A`	Smile
♨	`♨`		`\2668`	Hot Springs
➑	`➑`		`\2791`	8-Ball
☆	`☆`		`\2606`	White Star
★	`★`		`\2605`	Black Star
✪	`✪`		`\272A`	Circled White Star
✰	`✰`		`\2730`	Shadowed White Star
✧	`✧`		`\2727`	Open Centre Teardrop-Spoked Asterisk
✦	`✦`		`\2726`	Heavy Teardrop-Spoked Pinwheel Asterisk
♡	`♡`		`\2661`	White Heart Suit
❤	`❤`		`\2764`	Heavy Black Heart
✈	`✈`		`\2708`	Airplane
✂	`✂`		`\2702`	Black Scissors
✄	`✄`		`\2704`	White Scissors
♕	`♕`		`\2655`	White Chess Queen
✝	`✝`		`\271D`	Latin Cross
†	`†`	`&dagger;`	`\2020`	Dagger
‡	`‡`	`&Dagger;`	`\2021`	Double Dagger
◑	`◑`		`\25D1`	Circle with Left Half Black
♪	`♪`		`\266A`	Eighth Note
♫	`♫`		`\266B`	Beamed Eighth Notes
✣	`✣`		`\2723`	Four Teardrop-Spoked Asterisk
☑	`☑`		`\2611`	Ballot Box with Check
✔	`✔`		`\2714`	Heavy Check Mark
✘	`✘`		`\2718`	Heavy Multiplication X
╳	`╳`	-	`\2573`	Box Drawings Light Diagonal Cross
✎	`✎`		`\270E`	Lower Right Pencil
✍	`✍`		`\270D`	Writing Hand
♀	`♀`		`\2640`	Female Sign
♂	`♂`		`\2642`	Male Sign
☎	`☎`		`\260E`	Black Telephone
☏	`☏`		`\260F`	White Telephone
✉	`✉`		`\2709`	Envelope
✆	`✆`		`\2706`	Telephone Location Sign

Arrows

Icon	Decimal	Entity	css	Name
←	`←`	`←`	`\2190`	Leftwards Arrow
→	`→`	`→`	`\2192`	Rightwards Arrow
↑	`↑`	`↑`	`\2191`	Upwards Arrow
↓	`↓`	`↓`	`\2193`	Downwards Arrow
↔	`↔`	`↔`	`\2194`	Left Right Arrow
↕	`↕`	-	`\2195`	Up Down Arrow
⇄	`⇄`	-	`\21C4`	Rightwards Arrow Over Leftwards Arrow
⇅	`⇅`	-	`\21C5`	Upwards Arrow Leftwards of Downwards Arrow
↲	`↲`	-	`\21B2`	Downwards Arrow with Tip Leftwards
↳	`↳`	-	`\21B3`	Downwards Arrow with Tip Rightwards
↱	`↱`	-	`\21B1`	Upwards Arrow with Tip Rightwards
⇤	`⇤`	-	`\21E4`	Leftwards Arrow to Bar
↶	`↶`	-	`\21B6`	Anticlockwise Gapped Circle Arrow
↷	`↷`	-	`\21B7`	Clockwise Gapped Circle Arrow
↺	`↺`	-	`\21BA`	Anticlockwise Open Circle Arrow
↻	`↻`	-	`\21BB`	Clockwise Open Circle Arrow
➔	`➔`	-	`\2794`	Heavy Wide-Headed Rightwards Arrow
↯	`↯`	-	`\21AF`	Downwards Zigzag Arrow
↖	`↖`	-	`\2196`	North West Arrow
➘	`➘`	-	`\2798`	Heavy South East Arrow
➙	`➙`	-	`\2799`	Heavy Rightwards Arrow
➚	`➚`	-	`\279A`	Heavy North East Arrow
➟	`➟`	-	`\279F`	Heavy Dashed Rightwards Arrow
⇠	`⇠`	-	`\21E0`	Leftwards Dashed Arrow
⇢	`⇢`	-	`\21E2`	Rightwards Dashed Arrow
➤	`➤`	-	`\27A4`	Black Rightwards Arrowhead
▶	`▶`	-	`\25B6`	Black Right-Pointing Triangle
◀	`◀`	-	`\25C0`	Black Left-Pointing Triangle
▲	`▲`	-	`\25B2`	Black Up-Pointing Triangle
▼	`▼`	-	`\25BC`	Black Down-Pointing Triangle
▸	`▸`	-	`\25B8`	White Right-Pointing Small Triangle
◂	`◂`	-	`\25C2`	White Left-Pointing Small Triangle
▴	`▴`	-	`\25B4`	White Up-Pointing Small Triangle
▾	`▾`	-	`\25BE`	White Down-Pointing Small Triangle
►	`►`	-	`\25BA`	Black Right-Pointing Pointer
◄	`◄`	-	`\25C4`	Black Left-Pointing Pointer
▷	`▷`	-	`\25B7`	White Right-Pointing Pointer
◁	`◁`	-	`\25C1`	White Left-Pointing Pointer
△	`△`	-	`\25B3`	White Up-Pointing Pointer
▽	`▽`	-	`\25BD`	White Down-Pointing Pointer
⇦	`⇦`	-	`\21E6`	White Leftwards Arrow
⇨	`⇨`	-	`\21E8`	White Rightwards Arrow
⇒	`⇒`	`⇒`	`\21D2`	Rightwards Double Arrow
⇐	`⇐`	`⇐`	`\21D0`	Leftwards Double Arrow
⇑	`⇑`	`&uArr;`	`\21D1`	Upwards Double Arrow
⇓	`⇓`	`&dArr;`	`\21D3`	Downwards Double Arrow
⇔	`⇔`	`⇔`	`\21D4`	Left Right Double Arrow
↵	`↵`	`&crarr;`	`\21B5`	Downwards Arrow with Corner Leftwards

Quotation Marks

Icon	Decimal	Entity	css	Name
«	`«`	`«`	`\00AB`	Left-Pointing Double Angle Quotation Mark
»	`»`	`»`	`\00BB`	Right-Pointing Double Angle Quotation Mark
‘	`‘`	`‘`	`\2018`	Left Single Quotation Mark
’	`’`	`’`	`\2019`	Right Single Quotation Mark
‚	`‚`	`&sbquo;`	`\201A`	Single Low-9 Quotation Mark
“	`“`	`“`	`\201C`	Left Double Quotation Mark
”	`”`	`”`	`\201D`	Right Double Quotation Mark
„	`„`	`&bdquo;`	`\201E`	Double Low-9 Quotation Mark
′	`′`	`′`	`\2032`	Prime
″	`″`	`″`	`\2033`	Double Prime
‴	`‴`	-	`\2034`	Triple Prime

Special

Icon	Decimal	Entity	css	Name
№	`№`	-	`\2116`	Numero Sign
©	`©`	`©`	`\00A9`	Copyright Sign
®	`®`	`®`	`\00AE`	Registered Sign
™	`™`	`™`	`\2122`	Trade Mark Sign
℮	`℮`	-	`\212E`	Estimated Symbol
·	`·`	`·`	`\00B7`	Middle Dot
•	`•`	`•`	`\2022`	Bullet
■	`■`	-	`\25A0`	Black Square
□	`□`	-	`\25A1`	White Square
—	`—`	`—`	`\2014`	Em Dash
‰	`‰`	`&permil;`	`\2030`	Per Mille Sign
…	`…`	`…`	`\2026`	Horizontal Ellipsis
¶	`¶`	`¶`	`\00B6`	Pilcrow Sign

Currency

Icon	Decimal	Entity	css	Name
₽	`₽`	-	`\0020BD`	Ruble Sign
€	`€`	`€`	`\0020AC`	Euro Sign
£	`£`	`£`	`\00A3`	Pound Sign
₤	`₤`	-	`\20A4`	Lira Sign
¥	`¥`	`¥`	`\00A5`	Yen Sign
¢	`¢`	`¢`	`\00A2`	Cent Sign
¤	`¤`	`¤`	`\00A4`	Currency Sign

Weather

Icon	Decimal	Entity	css	Name
°	`°`	`°`	`\00B0`	Degree
☀	`☀`	-	`\2600`	Small sun
☼	`☼`	-	`\263C`	Big sun
☁	`☁`	-	`\2601`	Cloud
❆	`❆`	-	`\2746`	Snowflake 1
❅	`❅`	-	`\2745`	Snowflake 2
❄	`❄`	-	`\2744`	Snowflake 3

Pointers

Icon	Decimal	Entity	css	Name
☚	`☚`	-	`\261A`	Left-pointing index
☛	`☛`	-	`\261B`	Right-pointing index
☜	`☜`	-	`\261C`	White left-pointing index
☝	`☝`	-	`\261D`	White up-pointing index
☞	`☞`	-	`\261E`	White right-pointing index
☟	`☟`	-	`\261F`	White down-pointing index

Fractions

Icon	Decimal	Entity	css	Name
½	`½`	`½`	`\00BD`	Half (1/2)
¼	`¼`	`¼`	`\00BC`	Quarter (1/4)
¾	`¾`	`¾`	`\00BE`	Three Quarters (3/4)
⅓	`⅓`	-	`\2153`	One Third (1/3)
⅔	`⅔`	-	`\2154`	Two Thirds (2/3)
⅛	`⅛`	-	`\215B`	One Eighth (1/8)
⅜	`⅜`	-	`\215C`	Three Eighths (3/8)
⅝	`⅝`	-	`\215D`	Five Eighths (5/8)
⅞	`⅞`	-	`\215E`	Seven Eighths (7/8)

Roman Numerals

Icon	Decimal	Entity	css	Name
Ⅰ	`Ⅰ`	-	`\2160`	One (Roman numeral)
Ⅱ	`Ⅱ`	-	`\2161`	Two (Roman numeral)
Ⅲ	`Ⅲ`	-	`\2162`	Three (Roman numeral)
Ⅳ	`Ⅳ`	-	`\2163`	Four (Roman numeral)
Ⅴ	`Ⅴ`	-	`\2164`	Five (Roman numeral)
Ⅵ	`Ⅵ`	-	`\2165`	Six (Roman numeral)
Ⅶ	`Ⅶ`	-	`\2166`	Seven (Roman numeral)
Ⅷ	`Ⅷ`	-	`\2167`	Eight (Roman numeral)
Ⅸ	`Ⅸ`	-	`\2168`	Nine (Roman numeral)
Ⅹ	`Ⅹ`	-	`\2169`	Ten (Roman numeral)
Ⅺ	`Ⅺ`	-	`\216A`	Eleven (Roman numeral)
Ⅻ	`Ⅻ`	-	`\216B`	Twelve (Roman numeral)

Mathematics

Icon	Decimal	Entity	css	Name
∞	`∞`	`∞`	`\221E`	Infinity
±	`±`	`±`	`\00B1`	Plus or Minus
≅	`≅`	`&cong;`	`\2245`	Approximately Equal to
≈	`≈`	`≈`	`\2248`	Asymptotically Equal to
≠	`≠`	`≠`	`\2260`	Not Equal to
≡	`≡`	`&equiv;`	`\2261`	Identical to
≤	`≤`	`≤`	`\2264`	Less than or Equal to
≥	`≥`	`≥`	`\2265`	Greater than or Equal to
÷	`÷`	`÷`	`\00F7`	Division
×	`×`	`×`	`\00D7`	Multiplication ×
✖	`✖`	-	`\2716`	Heavy Multiplication x
¹	`¹`	`¹`	`\00B9`	One (superscript)
²	`²`	`²`	`\00B2`	Two (superscript)
³	`³`	`³`	`\00B3`	Three (superscript)
⊕	`⊕`	`&oplus;`	`\2295`	Direct Sum
⊗	`⊗`	`&otimes;`	`\2297`	Vector Product
∏	`∏`	`∏`	`\220F`	N-ary Product
∑	`∑`	`∑`	`\2211`	N-ary Summation (Sigma)
∅	`∅`	`∅`	`\2205`	Empty Set. Diameter.
∠	`∠`	`&ang;`	`\2220`	Angle
∥	`∥`	-	`\2225`	Parallel
⊥	`⊥`	`&perp;`	`\22A5`	Perpendicular
△	`△`	-	`\25B3`	Triangle
○	`○`	-	`\25CB`	Circle
□	`□`	-	`\25A1`	Square
‾	`‾`	`&oline;`	`\203E`	Overline
⁄	`⁄`	`&frasl;`	`\2044`	Fraction Slash

Icon	Decimal	Entity	css	Name
√	`√`	`√`	`\221A`	Square Root
∝	`∝`	`&prop;`	`\221D`	Proportional to
∩	`∩`	`∩`	`\2229`	Intersection
∪	`∪`	`∪`	`\222A`	Union
∫	`∫`	`∫`	`\222B`	Integral
∴	`∴`	`&there4;`	`\2234`	Therefore
∼	`∼`	`&sim;`	`\223C`	Tilde Operator
⊂	`⊂`	`⊂`	`\2282`	Subset
⊃	`⊃`	`⊃`	`\2283`	Superset
⊄	`⊄`	`&nsub;`	`\2284`	Not a Subset
⊆	`⊆`	`&sube;`	`\2286`	Subset of or Equal to
⊇	`⊇`	`&supe;`	`\2287`	Superset of or Equal to
∧	`∧`	`&and;`	`\2227`	Logical AND
∨	`∨`	`&or;`	`\2228`	Logical OR

Icon	Decimal	Entity	css	Name
ℑ	`ℑ`	`&image;`	`\2111`	Imaginary part
ℜ	`ℜ`	`&real;`	`\211C`	Real part
ℵ	`ℵ`	`&alefsym;`	`\2135`	Aleph

Icon	Decimal	Entity	css	Name
∀	`∀`	`∀`	`\2200`	Universal quantifier
∃	`∃`	`∃`	`\2203`	Existential quantifier
∂	`∂`	`∂`	`\2202`	Partial differential
∇	`∇`	`∇`	`\2207`	Nabla
∈	`∈`	`∈`	`\2208`	Element of
∉	`∉`	`∉`	`\2209`	Not an Element of
∋	`∋`	`&ni;`	`\220B`	Contains as Member

Icon	Decimal	Entity	css	Name
Δ	`Δ`	`Δ`	`\0394`	Delta (uppercase)
ƒ	`ƒ`	`&fnof;`	`\0192`	Italic f
Α	`Α`	`Α`	`\0391`	Alpha (uppercase)
Β	`Β`	`Β`	`\0392`	Beta (uppercase)
Γ	`Γ`	`Γ`	`\0393`	Gamma (uppercase)
Ε	`Ε`	`Ε`	`\0395`	Epsilon (uppercase)
Ζ	`Ζ`	`Ζ`	`\0396`	Zeta (uppercase)
Η	`Η`	`Η`	`\0397`	Eta (uppercase)
Θ	`Θ`	`Θ`	`\0398`	Theta (uppercase)
Ι	`Ι`	`Ι`	`\0399`	Iota (uppercase)
Κ	`Κ`	`Κ`	`\039A`	Kappa (uppercase)
Λ	`Λ`	`Λ`	`\039B`	Lambda (uppercase)
Μ	`Μ`	`Μ`	`\039C`	Mu (uppercase)
Ν	`Ν`	`Ν`	`\039D`	Nu (uppercase)
Ξ	`Ξ`	`Ξ`	`\039E`	Xi (uppercase)
Ο	`Ο`	`Ο`	`\039F`	Omicron (uppercase)
Π	`Π`	`Π`	`\03A0`	Pi (uppercase)
Ρ	`Ρ`	`Ρ`	`\03A1`	Rho (uppercase)
Σ	`Σ`	`Σ`	`\03A3`	Sigma (uppercase)
Τ	`Τ`	`Τ`	`\03A4`	Tau (uppercase)
Υ	`Υ`	`Υ`	`\03A5`	Upsilon (uppercase)
Φ	`Φ`	`Φ`	`\03A6`	Phi (uppercase)
Χ	`Χ`	`Χ`	`\03A7`	Chi (uppercase)
Ψ	`Ψ`	`Ψ`	`\03A8`	Psi (uppercase)
Ω	`Ω`	`Ω`	`\03A9`	Omega (uppercase)
α	`α`	`α`	`\03B1`	Alpha (lowercase)
β	`β`	`β`	`\03B2`	Beta (lowercase)
γ	`γ`	`γ`	`\03B3`	Gamma (lowercase)
δ	`δ`	`δ`	`\03B4`	Delta (lowercase)
ε	`ε`	`ε`	`\03B5`	Epsilon (lowercase)
ζ	`ζ`	`ζ`	`\03B6`	Zeta (lowercase)
η	`η`	`η`	`\03B7`	Eta (lowercase)
θ	`θ`	`θ`	`\03B8`	Theta (lowercase)
ι	`ι`	`ι`	`\03B9`	Iota (lowercase)
κ	`κ`	`κ`	`\03BA`	Kappa (lowercase)
λ	`λ`	`λ`	`\03BB`	Lambda (lowercase)
μ	`μ`	`μ`	`\03BC`	Mu (lowercase)
ν	`ν`	`ν`	`\03BD`	Nu (lowercase)
ξ	`ξ`	`ξ`	`\03BE`	Xi (lowercase)
ο	`ο`	`ο`	`\03BF`	Omicron (lowercase)
π	`π`	`π`	`\03C0`	Pi (lowercase)
ρ	`ρ`	`ρ`	`\03C1`	Rho (lowercase)
ς	`ς`	`&sigmaf;`	`\03C2`	Final sigma (lowercase)
σ	`σ`	`σ`	`\03C3`	Sigma (lowercase)
τ	`τ`	`τ`	`\03C4`	Tau (lowercase)
υ	`υ`	`υ`	`\03C5`	Upsilon (lowercase)
φ	`φ`	`φ`	`\03C6`	Phi (lowercase)
χ	`χ`	`χ`	`\03C7`	Chi (lowercase)
ψ	`ψ`	`ψ`	`\03C8`	Psi (lowercase)
ω	`ω`	`ω`	`\03C9`	Omega (lowercase)
ϑ	`ϑ`	`&thetasym;`	`\03D1`	Theta (lowercase)
ϒ	`ϒ`	`&upsih;`	`\03D2`	Upsilon with hook
ϖ	`ϖ`	`ϖ`	`\03D6`	Pi

Cards

Icon	Decimal	Entity	css	Name
♠	`♠`	`&spades;`	`\2660`	Spades Black
♥	`♥`	`&hearts;`	`\2665`	Hearts Black
♦	`♦`	`&diams;`	`\2666`	Diamonds Black
♣	`♣`	`&clubs;`	`\2663`	Clubs Black
♤	`♤`	-	`\2664`	Spades White
♡	`♡`	-	`\2661`	Hearts White
♢	`♢`	-	`\2662`	Diamonds White
♧	`♧`	-	`\2667`	Clubs White

Chess

Icon	Decimal	Entity	css	Name
♔	`♔`	-	`\2654`	King White
♕	`♕`	-	`\2655`	Queen White
♖	`♖`	-	`\2656`	Rook White
♗	`♗`	-	`\2657`	Bishop White
♘	`♘`	-	`\2658`	Knight White
♙	`♙`	-	`\2659`	Pawn White
♚	`♚`	-	`\265A`	King Black
♛	`♛`	-	`\265B`	Queen Black
♜	`♜`	-	`\265C`	Rook Black
♝	`♝`	-	`\265D`	Bishop Black
♞	`♞`	-	`\265E`	Knight Black
♟	`♟`	-	`\265F`	Pawn Black

Folder Tree

Icon	Decimal	Entity	css
├	`├`	-	`\251C`
└	`└`	-	`\2514`
│	`│`	-	`\2502`
┬	`┬`	-	`\252C`
─	`─`	-	`\2500`

Always display icons as text

How to make browsers display icons as text, not as Emoji.

To achieve this, you need to append Variation Selector 15 (VS15) - U+FE0E to the icon. Then both of these icons will be rendered as a single glyph.

For example:

🔒
🔒︎ = 🔒&#xFE0E;

☝
☝︎ = ☝&#xFE0E;

However, it does not work with all icons:

✍
✍️︎ = ✍&#xFE0E;

More details: