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
Designing Icons and WordPress Admin Icons
Search
Laura Kalbag
January 17, 2013
Design
2
1.2k
Designing Icons and WordPress Admin Icons
From a talk at WordPress London in January 2013
Laura Kalbag
January 17, 2013
Tweet
Share
More Decks by Laura Kalbag
See All by Laura Kalbag
Ethical Design
laurakalbag
1
120
Intro to UX
laurakalbag
1
180
Ethical Design
laurakalbag
1
2.9k
Accessibility By Design
laurakalbag
1
110
Designing For Accessibility
laurakalbag
2
160
Indie Design
laurakalbag
4
2k
WAI-ARIA in 10
laurakalbag
1
250
Designing for Accessibility
laurakalbag
0
80
Designing for Accessibility
laurakalbag
1
520
Other Decks in Design
See All in Design
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
180
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
300
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.4k
mento Design Team Portfolio
mento0fficial
1
690
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
250
#Dubois Challenge 2025: Economics
ajstarks
1
170
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Bash Introduction
62gerente
615
210k
How to Ace a Technical Interview
jacobian
279
23k
Music & Morning Musume
bryan
46
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Context Engineering - Making Every Token Count
addyosmani
3
60
Statistics for Hackers
jakevdp
799
220k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Transcript
Laura Kalbag @laurakalbag laurakalbag.com Designing WordPress Admin Icons
Why use icons?
“inform, translate and warn” — Jon Hicks The Icon Handbook
We use them as…
navigation Icons: Symbolicons
shorthand Icons: Pixicon
status Icons: Coquette
emotion Icons: IconTexto
instruction Icons: Gestures by Prekesh
action Icons: Lino
And we’re most likely to come across them as…
favicons WordPress
pictograms Icon: Symbolicons
app icons Silverback app
What makes icons great?
None
Sketch Beta
consistency Icon: Pixicons
Consistency • size • colour • style • lines •
light • angle
WordPress admin icons
the dissection Icon: Symbolicons
mostly one-colour slightly muted colours not angled, face-on flat solid
1px outlines minimal detail subtle gradient light source from the top multiple objects overlap
What do you need to make? Icon: Symbolicons
28px greyscale icon on a transparent background
28px colour icon on a transparent background
32px greyscale icon on a transparent background
but then there’s blue… Icon: Symbolicons
28px blue tint icon on a transparent background
32px blue tint icon on a transparent background
So altogether that makes… • 28px greyscale icon • 28px
colour icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
but then there’s hi-DPI… Icon: Pixicons
Which then makes… • 28px greyscale icon • 28px colour
icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
Which then makes… • 28px greyscale icon • 28px colour
icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
Which then makes… • 28px greyscale icon • 28px colour
icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
Which then makes… • 28px greyscale icon • 28px colour
icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon • 56px greyscale icon • 56px colour icon • 64px greyscale icon • 56px blue tint icon • 64px blue tint icon
So let’s be sensible… Icon: Pixicons
We want to make • 28px greyscale icon • 28px
colour icon • 32px greyscale icon • 56px greyscale icon • 56px colour icon • 64px greyscale icon
Icon: Symbolicons Live WordPress admin icon
Icon: Pixicons Laura Kalbag @laurakalbag laurakalbag.com