Web Design Latest Trends & Help Articles

CSS glyphs and other special characters for HTML, javascript and CSS


by on Category: Technology (89652 Views)


Many times as web designers we are asked to use icons and figurines on websites to represent something and often our first thought will go to font-icons. Font-Icons are a great solution that works well most the time. We can have as many icons as we need and they all load pretty fast. But there is an even faster way to get some icons loaded into a project that is already within the used fonts and are always available with no need of any external libraries.

Our company has used the following list for a long time, and we can categorically say that all of them work perfectly. Sometimes the requirements of the design can be met by only using these glyphs and no additional fonts are needed.

The following is a collection of already existing glyphs than can be used with HTML, JavaScript and CSS (SASS, SCSS, LESS) without the need of any external library. Or course, this is not a definitive list, and we will keep adding more as we go. Happy coding!

Special Characters

SymbolDescriptionHTML NameNumericCSSJS
" quotation mark quot; #34; p:before{content:"\0022";} console.log("\42")
& ampersand amp; #38; p:before{content:"\0026";} console.log("\46")
< less-than sign lt; #60; p:before{content:"\003c";} console.log("\74");
> greater-than sign gt; #62; p:before{content:"\003e";} console.log("\76");
no-break space nbsp; #160; p:before{content:"\00a0";} console.log("\240");
¡ inverted exclamation mark iexcl; #161; p:before{content:"\00a1";} console.log("\241");
¢ cent sign cent; #162; p:before{content:"\00a2";} console.log("\242");
£ pound sterling sign pound; #163; p:before{content:"\00a3";} console.log("\243");
¤ general currency sign curren; #164; p:before{content:"\00a4";} console.log("\244");
¥ yen sign yen; #165; p:before{content:"\00a5";} console.log("\245");
euro sign euro; #128; p:before{content:"\20AC";} console.log("\u20AC");
¦ broken (vertical) bar brvbar; #166; p:before{content:"\00a6";} console.log("\246");
§ section sign sect; #167; p:before{content:"\00a7";} console.log("\247");
¨ umlaut (dieresis) uml; #168; p:before{content:"\00a8";} console.log("\250");
© copyright sign copy; #169; p:before{content:"\00A9";} console.log("\u00A9");
trademark sign trade; #153; p:before{content:"\2122";} console.log("\u2122");
ª ordinal indicator, feminine ordf; #170; p:before{content:"\00aa";} console.log("\252");
« angle quotation mark, left laquo; #171; p:before{content:"\00ab";} console.log("\253");
¬ not sign not; #172; p:before{content:"\00ac";} console.log("\254");
­ soft hyphen shy; #173; p:before{content:"\00ad";} console.log("\255");
® registered sign reg; #174; p:before{content:"\00ae";} console.log("\256");
¯ macron macr; #175; p:before{content:"\00af";} console.log("\257");
° degree sign deg; #176; p:before{content:"\00b0";} console.log("\260");
degree celsius sign N/A #8451; p:before{content:"\2103";} console.log("\u2103");
degree fahrenheit sign N/A #8457; p:before{content:"\2109";} console.log("\u2109");
± plus-or-minus sign plusmn; #177; p:before{content:"\00b1";} console.log("\261");
² superscript two sup2; #178; p:before{content:"\00b2";} console.log("\262");
³ superscript three sup3; #179; p:before{content:"\00b3";} console.log("\263");
´ acute accent acute; #180; p:before{content:"\00b4";} console.log("\264");
µ micro sign micro; #181; p:before{content:"\00b5";} console.log("\265");
pilcrow (paragraph sign) para; #182; p:before{content:"\00b6";} console.log("\266");
· middle dot middot; #183; p:before{content:"\00b7";} console.log("\267");
¸ cedilla cedil; #184; p:before{content:"\00b8";} console.log("\270");
¹ superscript one sup1; #185; p:before{content:"\00b9";} console.log("\271");
º ordinal indicator, masculine ordm; #186; p:before{content:"\00ba";} console.log("\272");
» angle quotation mark, right raquo; #187; p:before{content:"\00bb";} console.log("\273");
¼ fraction one-quarter frac14; #188; p:before{content:"\00bc";} console.log("\274");
½ fraction one-half frac12; #189; p:before{content:"\00bd";} console.log("\275");
¾ fraction three-quarters frac34; #190; p:before{content:"\00be";} console.log("\276");
¿ inverted question mark iquest; #191; p:before{content:"\00bf";} console.log("\277");
À capital A, grave accent Agrave; #192; p:before{content:"\00c0";} console.log("\300");
Á capital A, acute accent Aacute; #193; p:before{content:"\00c1";} console.log("\301");
 capital A, circumflex accent Acirc; #194; p:before{content:"\00c2";} console.log("\302");
à capital A, tilde Atilde; #195; p:before{content:"\00c3";} console.log("\303");
Ä capital A, dieresis or umlaut mark Auml; #196; p:before{content:"\00c4";} console.log("\304");
Å capital A, ring Aring; #197; p:before{content:"\00c5";} console.log("\305");
Æ capital AE diphthong (ligature) AElig; #198; p:before{content:"\00c6";} console.log("\306");
Ç capital C, cedilla Ccedil; #199; p:before{content:"\00c7";} console.log("\307");
È capital E, grave accent Egrave; #200; p:before{content:"\00c8";} console.log("\310");
É capital E, acute accent Eacute; #201; p:before{content:"\00c9";} console.log("\311");
Ê capital E, circumflex accent Ecirc; #202; p:before{content:"\00ca";} console.log("\312");
Ë capital E, dieresis or umlaut mark Euml; #203; p:before{content:"\00cb";} console.log("\313");
Ì capital I, grave accent Igrave; #204; p:before{content:"\00cc";} console.log("\314");
Í capital I, acute accent Iacute; #205; p:before{content:"\00cd";} console.log("\315");
Î capital I, circumflex accent Icirc; #206; p:before{content:"\00ce";} console.log("\316");
Ï capital I, dieresis or umlaut mark Iuml; #207; p:before{content:"\00cf";} console.log("\317");
Ð capital Eth, Icelandic ETH; #208; p:before{content:"\00d0";} console.log("\320");
Ñ capital N, tilde Ntilde; #209; p:before{content:"\00d1";} console.log("\321");
Ò capital O, grave accent Ograve; #210; p:before{content:"\00d2";} console.log("\322");
Ó capital O, acute accent Oacute; #211; p:before{content:"\00d3";} console.log("\323");
Ô capital O, circumflex accent Ocirc; #212; p:before{content:"\00d4";} console.log("\324");
Õ capital O, tilde Otilde; #213; p:before{content:"\00d5";} console.log("\325");
Ö capital O, dieresis or umlaut mark Ouml; #214; p:before{content:"\00d6";} console.log("\326");
× multiply sign times; #215; p:before{content:"\00d7";} console.log("\327");
Ø capital O, slash Oslash; #216; p:before{content:"\00d8";} console.log("\330");
Ù capital U, grave accent Ugrave; #217; p:before{content:"\00d9";} console.log("\331");
Ú capital U, acute accent Uacute; #218; p:before{content:"\00da";} console.log("\332");
Û capital U, circumflex accent Ucirc; #219; p:before{content:"\00db";} console.log("\333");
Ü capital U, dieresis or umlaut mark Uuml; #220; p:before{content:"\00dc";} console.log("\334");
Ý capital Y, acute accent Yacute; #221; p:before{content:"\00dd";} console.log("\335");
Þ capital THORN, Icelandic THORN; #222; p:before{content:"\00de";} console.log("\336");
ß small sharp s, German (sz ligature) szlig; #223; p:before{content:"\00df";} console.log("\337");
à small a, grave accent agrave; #224; p:before{content:"\00e0";} console.log("\340");
á small a, acute accent aacute; #225; p:before{content:"\00e1";} console.log("\341");
â small a, circumflex accent acirc; #226; p:before{content:"\00e2";} console.log("\342");
ã small a, tilde atilde; #227; p:before{content:"\00e3";} console.log("\343");
ä small a, dieresis or umlaut mark auml; #228; p:before{content:"\00e4";} console.log("\344");
å small a, ring aring; #229; p:before{content:"\00e5";} console.log("\345");
æ small ae diphthong (ligature) aelig; #230; p:before{content:"\00e6";} console.log("\346");
ç small c, cedilla ccedil; #231; p:before{content:"\00e7";} console.log("\347");
è small e, grave accent egrave; #232; p:before{content:"\00e8";} console.log("\350");
é small e, acute accent eacute; #233; p:before{content:"\00e9";} console.log("\351");
ê small e, circumflex accent ecirc; #234; p:before{content:"\00ea";} console.log("\352");
ë small e, dieresis or umlaut mark euml; #235; p:before{content:"\00eb";} console.log("\353");
ì small i, grave accent igrave; #236; p:before{content:"\00ec";} console.log("\354");
í small i, acute accent iacute; #237; p:before{content:"\00ed";} console.log("\355");
î small i, circumflex accent icirc; #238; p:before{content:"\00ee";} console.log("\356");
ï small i, dieresis or umlaut mark iuml; #239; p:before{content:"\00ef";} console.log("\357");
ð small eth, Icelandic eth; #240; p:before{content:"\00f0";} console.log("\360");
ñ small n, tilde ntilde; #241; p:before{content:"\00f1";} console.log("\361");
ò small o, grave accent ograve; #242; p:before{content:"\00f2";} console.log("\362");
ó small o, acute accent oacute; #243; p:before{content:"\00f3";} console.log("\363");
ô small o, circumflex accent ocirc; #244; p:before{content:"\00f4";} console.log("\364");
õ small o, tilde otilde; #245; p:before{content:"\00f5";} console.log("\365");
ö small o, dieresis or umlaut mark ouml; #246; p:before{content:"\00f6";} console.log("\366");
÷ divide sign divide; #247; p:before{content:"\00f7";} console.log("\367");
ø small o, slash oslash; #248; p:before{content:"\00f8";} console.log("\370");
ù small u, grave accent ugrave; #249; p:before{content:"\00f9";} console.log("\371");
ú small u, acute accent uacute; #250; p:before{content:"\00fa";} console.log("\372");
û small u, circumflex accent ucirc; #251; p:before{content:"\00fb";} console.log("\373");
ü small u, dieresis or umlaut mark uuml; #252; p:before{content:"\00fc";} console.log("\374");
ý small y, acute accent yacute; #253; p:before{content:"\00fd";} console.log("\375");
þ small thorn, Icelandic thorn; #254; p:before{content:"\00fe";} console.log("\376");
ÿ small y, dieresis or umlaut mark yuml; #255; p:before{content:"\00ff";} console.log("\377");
Πlatin capital ligature oe OElig; #338; p:before{content:"\0152";} console.log("\u0152");
œ latin small ligature oe oelig; #339; p:before{content:"\0153";} console.log("\u0153");
Š latin capital letter s with caron Scaron; #352; p:before{content:"\0160";} console.log("\u0160");
š latin small letter s with caron scaron; #353; p:before{content:"\0161";} console.log("\u0161");
Ÿ latin capital letter y with diaeresis Yuml; #376; p:before{content:"\0178";} console.log("\u0178");
ƒ latin small f with hook or function fnof; #402; p:before{content:"\0192";} console.log("\u0192");
ˆ modifier letter circumflex accent circ; N/A p:before{content:"\02c6";} console.log("\u02c6");
˜ small tilde tilde; N/A p:before{content:"\02dc";} console.log("\u02dc");
Α greek capital letter alpha Alpha; #913; p:before{content:"\0391";} console.log("\u0391");
Β greek capital letter beta Beta; #914; p:before{content:"\0392";} console.log("\u0392");
Γ greek capital letter gamma Gamma; #915; p:before{content:"\0393";} console.log("\u0395");
Δ greek capital letter delta Delta; #916; p:before{content:"\0394";} console.log("\u0394");
Ε greek capital letter epsilon Epsilon; #917; p:before{content:"\0395";} console.log("\u0395");
Ζ greek capital letter zeta Zeta; #918; p:before{content:"\0396";} console.log("\u0396");
Η greek capital letter eta Eta; #919; p:before{content:"\0397";} console.log("\u0397");
Θ greek capital letter theta Theta; #920; p:before{content:"\0398";} console.log("\u0398");
Ι greek capital letter iota Iota; #921; p:before{content:"\0399";} console.log("\u0399");
Κ greek capital letter kappa Kappa; #922; p:before{content:"\039a";} console.log("\u039a");
Λ greek capital letter lambda Lambda; #923; p:before{content:"\039b";} console.log("\u039b");
Μ greek capital letter mu Mu; #924; p:before{content:"\039c";} console.log("\u039c");
Ν greek capital letter nu Nu; #925; p:before{content:"\039d";} console.log("\u039D");
Ξ greek capital letter xi Xi; #926; p:before{content:"\039e";} console.log("\u039e");
Ο greek capital letter omicron Omicron; #927; p:before{content:"\039f";} console.log("\u039f");
Π greek capital letter pi Pi; #928; p:before{content:"\03a0";} console.log("\u03a0");
Ρ greek capital letter rho Rho; #929; p:before{content:"\03a1";} console.log("\u03a1");
Σ greek capital letter sigma Sigma; #931; p:before{content:"\03a3";} console.log("\u03A3");
Τ greek capital letter tau Tau; #932; p:before{content:"\03a4";} console.log("\u03A4");
Υ greek capital letter upsilon Upsilon; #933; p:before{content:"\03a5";} console.log("\u03A5");
Φ greek capital letter phi Phi; #934; p:before{content:"\03a6";} console.log("\u03A6");
Χ greek capital letter chi Chi; #935; p:before{content:"\03a7";} console.log("\u03A7");
Ψ greek capital letter psi Psi; #936; p:before{content:"\03a8";} console.log("\u03A8");
Ω greek capital letter omega Omega; #937; p:before{content:"\03a9";} console.log("\u03A9");
α greek small letter alpha alpha; #945; p:before{content:"\03b1";} console.log("\u03b1");
β greek small letter beta beta; #946; p:before{content:"\03b2";} console.log("\u03b2");
γ greek small letter gamma gamma; #947; p:before{content:"\03b3";} console.log("\u03b3");
δ greek small letter delta delta; #948; p:before{content:"\03b4";} console.log("\u03b4");
ε greek small letter epsilon epsilon; #949; p:before{content:"\03b5";} console.log("\u03b5");
ζ greek small letter zeta zeta; #950; p:before{content:"\03b6";} console.log("\u03b6");
η greek small letter eta eta; #951; p:before{content:"\03b7";} console.log("\u03b7");
θ greek small letter theta theta; #952; p:before{content:"\03b8";} console.log("\u03b8");
ι greek small letter iota iota; #953; p:before{content:"\03b9";} console.log("\u03b9");
κ greek small letter kappa kappa; #954; p:before{content:"\03ba";} console.log("\u03ba");
λ greek small letter lambda lambda; #955; p:before{content:"\03bb";} console.log("\u03bb");
μ greek small letter mu mu; #956; p:before{content:"\03bc";} console.log("\u03bc");
ν greek small letter nu nu; #957; p:before{content:"\03bd";} console.log("\u03bd");
ξ greek small letter xi xi; #958; p:before{content:"\03be";} console.log("\u03be");
ο greek small letter omicron omicron; #959; p:before{content:"\03bf";} console.log("\u03bf");
π greek small letter pi pi; #960; p:before{content:"\03c0";} console.log("\u03c0");
ρ greek small letter rho rho; #961; p:before{content:"\03c1";} console.log("\u03c1");
ς greek small letter final sigma sigmaf; #962; p:before{content:"\03C2";} console.log("\u03c2");
σ greek small letter sigma sigma; #963; p:before{content:"\03C3";} console.log("\u03c3");
τ greek small letter tau tau; #964; p:before{content:"\03C4";} console.log("\u03c4");
υ greek small letter upsilon upsilon; #965; p:before{content:"\03C5";} console.log("\u03c5");
φ greek small letter phi phi; #966; p:before{content:"\03C6";} console.log("\03c6");
χ greek small letter chi chi; #967; p:before{content:"\03C7";} console.log("\u03c7");
ψ greek small letter psi psi; #968; p:before{content:"\03C8";} console.log("\u03c8");
ω greek small letter omega omega; #969; p:before{content:"\03C9";} console.log("\u03c9");
ϑ greek small letter theta symbol thetasym; #977; p:before{content:"\03D1";} console.log("\u03D1");
ϒ greek upsilon with hook symbol upsih; #978; p:before{content:"\03D2";} console.log("\u03D2");
ϖ greek pi symbol piv; #982; p:before{content:"\03D6";} console.log("\u03D6");
en space ensp; #8194; p:before{content:"\2002"} console.log("\u2002");
em space emsp; #8195; p:before{content:"\2003"} console.log("\u2003");
thin space thinsp; #8201; p:before{content:"\2009"} console.log("\u2009");
zero width non-joiner zwnj; #8204; p:before{content:"\200C"} console.log("\u200C");
zero width joiner zwj; #8205; p:before{content:"\200D"} console.log("\u200d");
left-to-right mark lrm; #8206; p:before{content:"\200E"} console.log("\u200e");
right-to-left mark rlm; #8207; p:before{content:"\200F"} console.log("\u200f");
en dash ndash; #8211; p:before{content:"\2013"} console.log("\u2013");
em dash mdash; #8212; p:before{content:"\2014"} console.log("\u2014");
left single quotation mark lsquo; #8216; p:before{content:"\2018"} console.log("\u2018");
right single quotation mark rsquo; #8217; p:before{content:"\2019"} console.log("\u2019");
single low-9 quotation mark sbquo; #8218; p:before{content:"\201A"} console.log("\u201a");
left double quotation mark ldquo; #8220; p:before{content:"\201C"} console.log("\u201c");
right double quotation mark rdquo; #8221; p:before{content:"\201D"} console.log("\u201d");
double low-9 quotation mark bdquo; #8222; p:before{content:"\201E"} console.log("\u201e");
dagger dagger; #8224; p:before{content:"\2020"} console.log("\u2020");
double dagger Dagger; #8225; p:before{content:"\2021"} console.log("\u2021");
per mille sign permil; #8240; p:before{content:"\2030"} console.log("\u2030");
single left-pointing angle quotation mark lsaquo; #8249; p:before{content:"\2039"} console.log("\u2039");
single right-pointing angle quotation mark rsaquo; #8250; p:before{content:"\203A"} console.log("\u203a");
bullet bull; #8226; N/A console.log("\u2219");
horizontal ellipsis hellip; #8230; N/A console.log("\u2026");
prime or minutes prime; #8242; N/A console.log("\u2032");
double prime or seconds Prime; #8243; N/A console.log("\u2033");
overline or spacing overscore oline; #8254; N/A console.log("\u203e");
fraction slash frasl; #8260; N/A console.log("\u8260");
trade mark sign trade; #8482; N/A console.log("\u2122");
alef symbol or first transfinite cardinal alefsym; #8501; N/A console.log("\u");
leftwards arrow larr; #8592; N/A console.log("\u2190");
upwards arrow uarr; #8593; N/A console.log("\u2191");
rightwards arrow rarr; #8594; N/A console.log("\u2192");
downwards arrow darr; #8595; N/A console.log("\u2193");
left right arrow harr; #8596; N/A console.log("\u2194");
downwards arrow with corner leftwards or carriage return crarr; #8629; N/A console.log("\u21b5");
leftwards double arrow lArr; #8656; N/A console.log("\u21d0");
upwards double arrow uArr; #8657; N/A console.log("\u21d1");
rightwards double arrow rArr; #8658; N/A console.log("\u21d2");
downwards double arrow dArr; #8659; N/A console.log("\ud1d3");
left right double arrow hArr; #8660; N/A console.log("\u21d4");
for all forall; #8704; N/A console.log("\u2200");
partial differential part; #8706; N/A console.log("\u2202");
there exists exist; #8707; N/A console.log("\u2203");
empty set or null set empty; #8709; N/A console.log("\u2205");
nabla or backward difference nabla; #8711; N/A console.log("\u2207");
element of isin; #8712; N/A console.log("\u2208");
not an element of notin; #8713; N/A console.log("\u2209");
contains as member ni; #8715; N/A console.log("\u220b");
n-ary product or product sign prod; #8719; N/A console.log("\u03a0");
n-ary sumation sum; #8721; N/A console.log("\u03a3");
minus sign minus; #8722; N/A console.log("\u2212");
asterisk operator lowast; #8727; N/A console.log("\u2217");
square root or radical sign radic; #8730; N/A console.log("\u221a");
proportional to prop; #8733; N/A console.log("\u221d");
infinity infin; #8734; p:before{content:"\221E";} console.log("\u221e");
angle ang; #8736; N/A console.log("\u2220");
logical and or wedge and; #8869; N/A console.log("\u2227");
logical or or vee or; #8870; N/A console.log("\u2228");
intersection or cap cap; #8745; N/A console.log("\u2229");
union or cup cup; #8746; N/A console.log("\u222a");
integral int; #8747; N/A console.log("\u222b");
therefore there4; #8756; N/A console.log("\u2234");
tilde operator sim; #8764; N/A console.log("\u223c");
approximately equal to cong; #8773; N/A console.log("\u2245");
almost equal to or asymptotic to asymp; #8776; N/A console.log("\u2248");
not equal to ne; #8800; N/A console.log("\u2260");
identical to equiv; #8801; N/A console.log("\u2261");
less-than or equal to le; #8804; N/A console.log("\u2264");
greater-than or equal to ge; #8805; N/A console.log("\u2265");
subset of sub; #8834; N/A console.log("\u2282");
superset of sup; #8835; N/A console.log("\u2283");
not a subset of nsub; #8836; N/A console.log("\u2284");
subset of or equal to sube; #8838; N/A console.log("\u2286");
superset of or equal to supe; #8839; N/A console.log("\u2287");
circled plus or direct sum oplus; #8853; N/A console.log("\u2295");
circled times or vector product otimes; #8855; N/A console.log("\u2297");
up tack or orthogonal to perp; #8869; N/A console.log("\u22a5");
dot operator sdot; #8901; N/A console.log("\u22c5");
left ceiling or apl upstile lceil; #8968; N/A console.log("\u2308");
right ceiling rceil; #8969; N/A console.log("\u2309");
left floor or apl downstile lfloor; #8970; N/A console.log("\u230a");
right floor rfloor; #8971; N/A console.log("\u230b");
left-pointing angle bracket lang; #9001; N/A console.log("\u2329");
right-pointing angle bracket rang; #9002; N/A console.log("\u232a");
lozenge loz; #9674; N/A console.log("\u25ca");
black spade suit spades; #9824; N/A console.log("\u2660");
black club suit, shamrock clubs; #9827; N/A console.log("\u2663");
black heart suit, valentine hearts; #9829; N/A console.log("\u2665");
black diamond suit diams; #9830; N/A console.log("\u2666");
filled phone N/A #9742; p:before{content:"\260E";} console.log("\u260E");
blank phone N/A #9743; p:before{content:"\260F";} console.log("\u260F");
filled universal recycling symbol N/A #9851; p:before{content:"\267B";} console.log("\u267B");
blank universal recycling symbol N/A #9842; p:before{content:"\2672";} console.log("\u2672");
filled recycled paper symbol N/A #9852; p:before{content:"\267C";} console.log("\u267C");
blank recycled paper symbol N/A #9853; p:before{content:"\267D";} console.log("\u267D");
staff of aesculapius N/A #9877; p:before{content:"\2695";} console.log("\u2695");
lower right pencil N/A #9998; p:before{content:"\270E";} console.log("\u270E");
cross N/A #10013; p:before{content:"\271D";} console.log("\u271D");
star of david N/A #10017; p:before{content:"\2721";} console.log("\u2721");
filled star N/A #10029; p:before{content:"\272D";} console.log("\u272D");
blank star N/A #10025; p:before{content:"\2729";} console.log("\u2729");


* Let us keep you updated with the latest new tips, tech news and helpful articles!

Subscribe to our mailing list

* Your privacy is very important to us.  You email will never be share with any 3rd private party.  We guarantee that all email from us will be valuable information we believe will be helpful to you or your business. We never send spam.

five starts web design customers reviews

What our (Partners/Customers) are saying

We here at Oshi mat, LLC are extremely grateful to our friends at Web Designer Express! After months of unreliable and faulty service with several past programmers we finally landed in the right hands. Web Designer Express and their fabulous staff designed a beautiful and 100% functional website. Not only is our website remarkable, our shopping cart easy to maneuver, but it allowed us to take full control of any future changes and updates with their own programming. We highly recommend Web Designer Express for all your website needs! Thank you guys!

Janette Bereha, Oshimat
Miami, Florida - USA