Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
180
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.1k
WAI-ARIA in 10
Avatar for Laura Kalbag laurakalbag
1
250
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
0
85
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
530

Other Decks in Design

See All in Design
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
360
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
580
8_8_リサーチカンファレンスプレイベント.pdf
Avatar for Muture muture
PRO
2
610
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
240
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
230
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
990k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
160
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
1
25k
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
180
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
510
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
6.2k

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
0
370
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
45
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Done Done
Avatar for chrislema chrislema
186
16k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
2
65

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