Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Designing Icons and WordPress Admin Icons

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Laura Kalbag Laura Kalbag
January 17, 2013
Design
1.2k
2

Designing Icons and WordPress Admin Icons

From a talk at WordPress London in January 2013

Avatar for Laura Kalbag

Laura Kalbag

January 17, 2013

More Decks by Laura Kalbag

See All by Laura Kalbag
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
150
Intro to UX
Avatar for Laura Kalbag laurakalbag
1
220
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
3k
Accessibility By Design
Avatar for Laura Kalbag laurakalbag
1
150
Designing For Accessibility
Avatar for Laura Kalbag laurakalbag
2
190
Indie Design
Avatar for Laura Kalbag laurakalbag
4
2.2k
WAI-ARIA in 10
Avatar for Laura Kalbag laurakalbag
1
300
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
0
110
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
560

Other Decks in Design

See All in Design
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
400
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
Avatar for AccessInnovations accessinnovations
0
260
ポートフォリオ_あやの
Avatar for ayano ngyenmazt1412
0
1.9k
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
Avatar for Muture muture
PRO
0
320
明日から真似できる、AIでデザインシステムを活用する方法
Avatar for viviON vivion
0
830
Typographie et intégration web
Avatar for Raphael Goetter goetter
0
160
デザイン組織の"次の"強みづくり
Avatar for 井斉花織（いおり） isaikaori
2
320
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
160
Starfall (2025)
Avatar for Rachel Poon rezaline
0
160
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
500
Rondo 1 Minute Short Storyboard
Avatar for Rachel Poon rezaline
0
120
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
260

Featured

See All Featured
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
930
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
310
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
350
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
450
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
400
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
53
4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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