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.1k
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
170
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
77
Designing for Accessibility
laurakalbag
1
520
Other Decks in Design
See All in Design
Storyboard Honey
rocioparronrubio
0
270
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
660
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
#Dubois Challenge 2025: Economics
ajstarks
0
120
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
freee + Product Design FY25Q4
freee
4
14k
sachi_y_portfolio
sachi337
0
250
今日から意識できるアクセシビリティ
fumiko
0
240
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
Echoes Boomerang
artcloudyu
PRO
0
240
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
250
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
170
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fireside Chat
paigeccino
37
3.5k
GitHub's CSS Performance
jonrohan
1031
460k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Statistics for Hackers
jakevdp
799
220k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
A better future with KSS
kneath
239
17k
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