Escolar Documentos
Profissional Documentos
Cultura Documentos
Youdon'tneedicons!Hereare100+unicode
symbolsthatyoucanuse
DannyMarkov December3rd,2014
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
Smiley ☺
HotSprings ♨
8Ball ➑
WhiteStar ☆
BlackStar ★
WhiteHeart ♡
BlackHeart ❤
Name Preview Code
Airplane ✈
BlackScissors ✂
WhiteScissors ✄
Crown ♕
Cross ✝
BlackWhiteCircle ◑
EightNote ♪
BeamedEighthNotes ♫
FourBalloonSpokedAsterisk ✣
CircledWhiteStar ✪
WhiteStar ✰
WhiteFourPointedStar ✧
Name Preview Code
BlackFourPointedStar ✦
BallotBoxCheck ☑
CheckMark ✔
CrossMark ✘
Pencil ✎
WritingHand ✍
Female ♀
Male ♂
BlackTelephone ☎
WhiteTelephone ☏
Envelope ✉
TelephoneLocation ✆
Arrows
Name Preview Code
LeftwardsArrow ←
RightwardsArrow →
UpwardsArrow ↑
DownwardsArrow ↓
LeftRightArrow ↔
UpDownArrow ↕
RightAndLeftArrows ⇄
UpAndDownArrows ⇅
DownLeft90degArrow ↲
DownRight90degArrow ↳
UpLeft90degArrow ↰
UpRight90degArrow ↱
Name Preview Code
LeftwardsArrowToBar ⇤
RightwardsArrowToBar ⇥
AnticlockwiseSemicircleArrow ↶
ClockwiseSemicircleArrow ↷
AnticlockwiseCircleArrow ↺
ClockwiseCircleArrow ↻
WideHeadedRightwardsArrow ➔
DownwardsZigzagArrow ↯
NorthWestArrow ↖
HeavySouthEastArrow ➘
HeavyRightwardsArrow ➙
HeavyNorthEastArrow ➚
Name Preview Code
DashedRightwardsArrow ➟
DottedLeftwardsArrow ⇠
BlackRightwardsArrowhead ➤
LeftwardsWhiteArrow ⇦
RightwardsWhiteArrow ⇨
LeftAngleQuotationMark «
RightAngleQuotationMark »
RightBlackPointer ►
LeftBlackPointer ◀
UpBlackPointer ▲
DownBlackPointer ▼
RightWhitePointer ▷
Name Preview Code
LeftWhitePointer ◁
UpWhitePointer △
DownWhitePointer ▽
BowArrow ➴
Special
Numero №
Copyright ©
Registered ®
Trademark ™
Estimated ℮
Bullet •
MiddleDot ·
Currency
Euro €
Pound £
Lira ₤
Yen ¥
Cent ¢
Currency ¤
Weather
Degree °
SmallSun ☀
BigSun ☼
Cloud ☁
Name Preview Code
Snowflake1 ❆
Snowflake2 ❅
Snowflake3 ❄
Pointers
PointerLeftBlack ☚
PointerRightBlack ☛
PointerLeftWhite ☜
PointerUpWhite ☝
PointerRightWhite ☞
PointerDownWhite ☟
CardSuits
HeartsBlack ♥
DiamondsBlack ♦
ClubsBlack ♣
SpadesWhite ♤
HeartsWhite ♡
DiamondsWhite ♢
ClubsWhite ♧
Chess
KingWhite ♔
QueenWhite ♕
RookWhite ♖
Name Preview Code
BishopWhite ♗
KnightWhite ♘
PawnWhite ♙
KingBlack ♚
QueenBlack ♛
RookBlack ♜
BishopBlack ♝
KnightBlack ♞
PawnBlack ♟
Maths
Infinity ∞
PlusMinus ±
Name Preview Code
LessThanOrEqualTo ≤
MoreThanOrEqualTo ≥
NotEqualTo ≠
Division ÷
Multiplicationx ×
HeavyMultiplicationx ✖
SuperscriptOne ¹
SuperscriptTwo ²
SuperscriptThree ³
CircledPlus ⊕
CircledMultiplication ⊗
LogicalAND ∧
Name Preview Code
LogicalOR ∨
Delta ∆
Pie ∏
Sigma(SUM) ∑
Omega Ω
EmptySet ∅
Angle ∠
Parallel ∥
Perpendicular ⊥
AlmostEqualTo ≈
Triangle △
Circle ○
Name Preview Code
Square □
Fractions
OneQuarter(1/4) ¼
OneHalf(1/2) ½
ThreeQuarters(3/4) ¾
OneThird(1/3) ⅓
TwoThirds(2/3) ⅔
OneEight(1/8) ⅛
ThreeEights(3/8) ⅜
FiveEights(5/8) ⅝
SevenEights(7/8) ⅞
RomanNumerals
Name Preview Code
RomanNumeralOne Ⅰ
RomanNumeralTwo Ⅱ
RomanNumeralThree Ⅲ
RomanNumeralFour Ⅳ
RomanNumeralFive Ⅴ
RomanNumeralSix Ⅵ
RomanNumeralSeven Ⅶ
RomanNumeralEight Ⅷ
RomanNumeralNine Ⅸ
RomanNumeralTen Ⅹ
RomanNumeralEleven Ⅺ
RomanNumeralTwelve Ⅻ
Afewnotes
Therearesomerenderingdifferencesbetweenthesesymbolsacrossoperatingsymbols.Thisiscausedbythe
differentfontfamiliesthatareused.Also,iOSandAndroidreplacesomeUnicodecharacterswithemoji,sobe
suretotesttheretomakesurethatthisdoesnthappenandtheiconsshowasintended.Havefuncoding!:)
RESOURCES
ZineEOOD 20092016