tutorialzine

articles newsletter thebook

Youdon'tneedicons!Hereare100+unicode
symbolsthatyoucanuse
DannyMarkov December3rd,2014

Tweet Like 130 Share 69

Everneededtoaddanicontoyourdesign,butyoudidntwanttoincludeimagesoranentireiconfontlikeFont
Awesomeintoyourpage?Wevegotgoodnewsforyouthereisavastlibraryofavailableiconsandglyphs
alreadyinyourbrowser.ItiscalledUnicode,anditisastandardwhichassignsauniqueidentifierforanever
expandingnumber(currentlyover110000)ofcharacters,symbolsandicons.

Thisdoesntmeanthatyouhaveachoiceofahundredthousandicons,though.Itisuptothebrowsertorender
them,anditusesthefontswhichareinstalledonthesystemtodoso.Inthisarticle,wevecollectedanumber
ofsymbolsthatareavailableacrossWindows,Linux,OSX,AndroidandiOS.Youcanusetheminyourweb
designstoday!
Tip:Thereisagoodarticlewhichexplainseverythingyouneedtoknowaboutcharacterencodingsand
unicode,whichwerecommendforeverysoftwaredevelopertoread.

Howtousetheseicons
Theiconsgiveninthetablesbelow,areregularcharacters,whichyoucancopyandpasteasiftheyareletters
oftext.ButiftheencodingusedtosaveyourHTML/CSSfilesisnotUTF8theymightnotshowup.Thisis
whyweveprovidedanHTMLescapecode,whichwillalwayswork.Hereiswhatyouneedtodotousethese
icons:

1.Findaniconthatyoulike.Weveprovidedsmallandlargepreviews.
2.Copythecode.
3.PasteitinyourHTMLasregulartext.InyourCSS,youcanuseitasthevalueofthecontentproperty.In
JS,PHPandotherprogramminglanguages,youcanuseitastextinstrings.
4.Youcancustomizetheiconsbysettingafontsize,colorandtextshadows,justlikeregulartext.

Iconlike

Name Preview Code

Smiley &#x263a

HotSprings &#x2668

8Ball &#x2791

WhiteStar &#x2606

BlackStar &#x2605

WhiteHeart &#x2661

BlackHeart &#x2764
 Name Preview Code

Airplane &#x2708

BlackScissors &#x2702

WhiteScissors &#x2704

Crown &#x2655

Cross &#x271d

BlackWhiteCircle &#x25d1

EightNote &#x266a

BeamedEighthNotes &#x266b

FourBalloonSpokedAsterisk &#x2723

CircledWhiteStar &#x272a

WhiteStar &#x2730

WhiteFourPointedStar &#x2727
 Name Preview Code

BlackFourPointedStar &#x2726

BallotBoxCheck &#x2611

CheckMark &#x2714

CrossMark &#x2718

Pencil &#x270e

WritingHand &#x270d

Female &#x2640

Male &#x2642

BlackTelephone &#x260e

WhiteTelephone &#x260f

Envelope &#x2709

TelephoneLocation &#x2706

Arrows
 Name Preview Code

LeftwardsArrow &#x2190

RightwardsArrow &#x2192

UpwardsArrow &#x2191

DownwardsArrow &#x2193

LeftRightArrow &#x2194

UpDownArrow &#x2195

RightAndLeftArrows &#x21c4

UpAndDownArrows &#x21c5

DownLeft90degArrow &#x21b2

DownRight90degArrow &#x21b3

UpLeft90degArrow &#x21b0

UpRight90degArrow &#x21b1
 Name Preview Code

LeftwardsArrowToBar &#x21e4

RightwardsArrowToBar &#x21e5

AnticlockwiseSemicircleArrow &#x21b6

ClockwiseSemicircleArrow &#x21b7

AnticlockwiseCircleArrow &#x21ba

ClockwiseCircleArrow &#x21bb

WideHeadedRightwardsArrow &#x2794

DownwardsZigzagArrow &#x21af

NorthWestArrow &#x2196

HeavySouthEastArrow &#x2798

HeavyRightwardsArrow &#x2799

HeavyNorthEastArrow &#x279a
 Name Preview Code

DashedRightwardsArrow &#x279f

DottedLeftwardsArrow &#x21e0

BlackRightwardsArrowhead &#x27a4

LeftwardsWhiteArrow &#x21e6

RightwardsWhiteArrow &#x21e8

LeftAngleQuotationMark &#xab

RightAngleQuotationMark &#xbb

RightBlackPointer &#x25ba

LeftBlackPointer &#x25c0

UpBlackPointer &#x25b2

DownBlackPointer &#x25bc

RightWhitePointer &#x25b7
 Name Preview Code

LeftWhitePointer &#x25c1

UpWhitePointer &#x25b3

DownWhitePointer &#x25bd

BowArrow &#x27b4

Special

Name Preview Code

Numero &#x2116

Copyright &#xa9

Registered &#xae

Trademark &#x2122

Estimated &#x212e

Bullet &#x2022

MiddleDot &#xb7
Currency

Name Preview Code

Euro &#x20ac

Pound &#xa3

Lira &#x20a4

Yen &#xa5

Cent &#xa2

Currency &#xa4

Weather

Name Preview Code

Degree &#xb0

SmallSun &#x2600

BigSun &#x263c

Cloud &#x2601
 Name Preview Code

Snowflake1 &#x2746

Snowflake2 &#x2745

Snowflake3 &#x2744

Pointers

Name Preview Code

PointerLeftBlack &#x261a

PointerRightBlack &#x261b

PointerLeftWhite &#x261c

PointerUpWhite &#x261d

PointerRightWhite &#x261e

PointerDownWhite &#x261f

CardSuits

Name Preview Code

HeartsBlack &#x2665

DiamondsBlack &#x2666

ClubsBlack &#x2663

SpadesWhite &#x2664

HeartsWhite &#x2661

DiamondsWhite &#x2662

ClubsWhite &#x2667

Chess

Name Preview Code

KingWhite &#x2654

QueenWhite &#x2655

RookWhite &#x2656
 Name Preview Code

BishopWhite &#x2657

KnightWhite &#x2658

PawnWhite &#x2659

KingBlack &#x265a

QueenBlack &#x265b

RookBlack &#x265c

BishopBlack &#x265d

KnightBlack &#x265e

PawnBlack &#x265f

Maths

Name Preview Code

Infinity &#x221e

PlusMinus &#xb1
 Name Preview Code

LessThanOrEqualTo &#x2264

MoreThanOrEqualTo &#x2265

NotEqualTo &#x2260

Division &#xf7

Multiplicationx &#xd7

HeavyMultiplicationx &#x2716

SuperscriptOne &#xb9

SuperscriptTwo &#xb2

SuperscriptThree &#xb3

CircledPlus &#x2295

CircledMultiplication &#x2297

LogicalAND &#x2227
 Name Preview Code

LogicalOR &#x2228

Delta &#x2206

Pie &#x220f

Sigma(SUM) &#x2211

Omega &#x3a9

EmptySet &#x2205

Angle &#x2220

Parallel &#x2225

Perpendicular &#x22a5

AlmostEqualTo &#x2248

Triangle &#x25b3

Circle &#x25CB
 Name Preview Code

Square &#x25A1

Fractions

Name Preview Code

OneQuarter(1/4) &#xbc

OneHalf(1/2) &#xbd

ThreeQuarters(3/4) &#xbe

OneThird(1/3) &#x2153

TwoThirds(2/3) &#x2154

OneEight(1/8) &#x215b

ThreeEights(3/8) &#x215c

FiveEights(5/8) &#x215d

SevenEights(7/8) &#x215e

RomanNumerals
 Name Preview Code

RomanNumeralOne &#x2160

RomanNumeralTwo &#x2161

RomanNumeralThree &#x2162

RomanNumeralFour &#x2163

RomanNumeralFive &#x2164

RomanNumeralSix &#x2165

RomanNumeralSeven &#x2166

RomanNumeralEight &#x2167

RomanNumeralNine &#x2168

RomanNumeralTen &#x2169

RomanNumeralEleven &#x216a

RomanNumeralTwelve &#x216b

Afewnotes
Therearesomerenderingdifferencesbetweenthesesymbolsacrossoperatingsymbols.Thisiscausedbythe
differentfontfamiliesthatareused.Also,iOSandAndroidreplacesomeUnicodecharacterswithemoji,sobe
suretotesttheretomakesurethatthisdoesnthappenandtheiconsshowasintended.Havefuncoding!:)

RESOURCES

ArticleLicense PrivacyPolicy ContactForm Advertise

ZineEOOD 20092016