Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Icons and WordPress Admin Icons

Avatar for Laura Kalbag Laura Kalbag
January 17, 2013
Design
2
1.2k

Designing Icons and WordPress Admin Icons

From a talk at WordPress London in January 2013

Avatar for Laura Kalbag

Laura Kalbag

January 17, 2013
Tweet

More Decks by Laura Kalbag

See All by Laura Kalbag
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
130
Intro to UX
Avatar for Laura Kalbag laurakalbag
1
190
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
3k
Accessibility By Design
Avatar for Laura Kalbag laurakalbag
1
120
Designing For Accessibility
Avatar for Laura Kalbag laurakalbag
2
170
Indie Design
Avatar for Laura Kalbag laurakalbag
4
2.2k
WAI-ARIA in 10
Avatar for Laura Kalbag laurakalbag
1
260
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
0
87
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
530

Other Decks in Design

See All in Design
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
200
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
910
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
27k
kintone Style Book
Avatar for kintone kintone
6
12k
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
120
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.1k
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
230
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
480
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
330
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
150
kintone_aroma
Avatar for kintone kintone
0
1.7k
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2.1k

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
240
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
230
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
43k
How to make the Groovebox
Avatar for あそなす asonas
2
2k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
260

Transcript

  1. Laura Kalbag @laurakalbag laurakalbag.com Designing WordPress Admin Icons

  2. Why use icons?

  3. “inform, translate and warn” — Jon Hicks The Icon Handbook

  4. We use them as…

  5. navigation Icons: Symbolicons

  6. shorthand Icons: Pixicon

  7. status Icons: Coquette

  8. emotion Icons: IconTexto

  9. instruction Icons: Gestures by Prekesh

  10. action Icons: Lino

  11. And we’re most likely to come across them as…

  12. favicons WordPress

  13. pictograms Icon: Symbolicons

  14. app icons Silverback app

  15. What makes icons great?

  16. None

  17. Sketch Beta

  18. consistency Icon: Pixicons

  19. Consistency • size • colour • style • lines •

    light • angle

  20. WordPress admin icons

  21. the dissection Icon: Symbolicons

  22. 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

  23. What do you need to make? Icon: Symbolicons

  24. 28px greyscale icon on a transparent background

  25. 28px colour icon on a transparent background

  26. 32px greyscale icon on a transparent background

  27. but then there’s blue… Icon: Symbolicons

  28. 28px blue tint icon on a transparent background

  29. 32px blue tint icon on a transparent background

  30. So altogether that makes… • 28px greyscale icon • 28px

    colour icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

  31. but then there’s hi-DPI… Icon: Pixicons

  32. Which then makes… • 28px greyscale icon • 28px colour

    icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

  33. Which then makes… • 28px greyscale icon • 28px colour

    icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

  34. Which then makes… • 28px greyscale icon • 28px colour

    icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

  35. 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

  36. So let’s be sensible… Icon: Pixicons

  37. We want to make • 28px greyscale icon • 28px

    colour icon • 32px greyscale icon • 56px greyscale icon • 56px colour icon • 64px greyscale icon

  38. Icon: Symbolicons Live WordPress admin icon

  39. Icon: Pixicons Laura Kalbag @laurakalbag laurakalbag.com