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
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
240
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.1k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
2
440
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
130
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
130
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
710
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
260
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
590
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
280
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
DC Style Redesign
mcduckyart
0
120
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Adopting Sorbet at Scale
ufuk
77
9.4k
Being A Developer After 40
akosma
90
590k
Raft: Consensus for Rubyists
vanstee
140
7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Visualization
eitanlees
146
16k
Navigating Team Friction
lara
187
15k
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