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

Designing Icons and WordPress Admin Icons

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
2.9k
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
86
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
530

Other Decks in Design

See All in Design
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
320
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
Avatar for 株式会社NIJIBOX nbkouhou
2
150
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
710
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
6
4.8k
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
4
5.6k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
580
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
800
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
180
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1M
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
160
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
1k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.2k

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
280
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
300
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
66
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
250
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k

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