Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Iconfont or svg?
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Justin Slack
August 23, 2015
Design
0
130
Iconfont or svg?
Lightning talk at CTEDs workshop - august 2015.
Justin Slack
August 23, 2015
Tweet
Share
Other Decks in Design
See All in Design
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
500
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
1.3k
mount_company_profile
mount_inc
0
4.9k
Correspondence:共に生成していく過程
akiramotomura
0
190
文化のデザイン - Soft Impact of Design
atsushihomma
0
140
Liquid GlassとApp Intents
touyou
0
810
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
3.1k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
500
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
130
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
380
hicard_credential_202601
hicard
0
150
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
2.8k
Featured
See All Featured
Tell your own story through comics
letsgokoyo
1
810
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
130
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
150
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
300
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
Leo the Paperboy
mayatellez
4
1.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
Navigating Weather and Climate Data
rabernat
0
110
How to build a perfect <img>
jonoalderson
1
4.9k
WENDY [Excerpt]
tessaabrams
9
36k
Transcript
Iconfonts versus inline svg
Icon systems • pngs
Icon systems • pngs • png sprites
Icon systems • pngs • png sprites • Weird javascript
to make transparency work in IE6
Icon systems • pngs • png sprites • Weird javascript
to make transparency work in IE6 • Retina problems
Iconfonts • Vectors • Can be created online via apps
such as Icomoon or Fontello
Iconfonts • Can be hosted locally
Iconfonts • Can be inlined in CSS
Iconfonts • Multiple ways to display based on how the
font is encoded
Iconfonts • Treated as text by browsers (good and bad)
Iconfonts • You can control the size (via font-size), color,
shadows, rotation, etc. via CSS.
SVG • Can be displayed through the use of CSS
Backgrounds, <object> tags, <img> tags, or inlined directly into your HTML
SVG • Inline SVG is right in the document. If
the browser supports it, it displays it.
<svg class="iconsvg"> <g> <polygon fill="#ad3429" points="217.14,14.856 169.039,14.856 235.993,147.185 260.045,99.649"></polygon> <polygon
fill="#ad3429" points="131.014,184.747 63.991,52.276 39.937,99.813 82.908,184.747"></polygon> <polygon fill="#f2723d" points="216.984,14.856 168.882,14.856 82.927,184.747 131.029,184.747"></polygon> <polygon fill="#f2723d" points="169.039,184.747 217.14,184.747 260.045,99.945 235.993,52.414"></polygon> <polygon fill="#f2723d" points="131.014,14.856 82.908,14.856 39.937,99.784 63.991,147.319"></polygon> </g> </svg>
SVG • semantics of <svg> suit icons which are essentially
images
SVG • accessible via <title>, <desc> and <aria-labelledby>
SVG • Can use build tools
Iconfonts - the bad • May not show up (private
unicode area)
Iconfonts - the bad • Very hard to align as
they depend on pseudo-elements (usually ::before), and things like line-height, vertical-align, letter-spacing, word-spacing and kerning.
Iconfonts - the bad • Cross origin resource
Iconfonts - the bad • Fails to load
Iconfonts - the bad • Chrome bug
Iconfonts - the bad • Android bugs
Iconfonts - the bad • No @font-face support
Iconfonts - the bad • One colour
Iconfonts - the bad • Dyslexia
SVG - the bad • Support. Fallbacks very hard.
Conclusion • Icon font if you have limited number and
low support requirements
Conclusion • Icon font if you have limited number and
low support requirements • svg for more versatility and large icon set
None