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

Designing Icons and WordPress Admin Icons

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
140
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
290
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
0
110
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
550

Other Decks in Design

See All in Design
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
560
Claudeもくもく会、はじめませんか？
Avatar for yusukeiyoda yusukeiyoda
0
230
2026-04-06 CMU School of Design "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
150
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
210
設計の進め方と 品質特性品質特性
Avatar for harachan harakeishi
0
1.3k
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～
Avatar for Cygames, Inc. cygames
PRO
3
5.2k
Decksh keywords
Avatar for Anthony Starks ajstarks
0
140
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
1k
富山デザイン勉強会_プレゼンテーション.pdf
Avatar for keita keita_yoshikawa
0
150
Bet AI Day 2026丨デザインハーネス：専門職の判断基準をコードのように運用する
Avatar for LayerX layerx
PRO
4
4.9k
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
Avatar for Kota SAITO kotasaito_cnt
0
810
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
680

Featured

See All Featured
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.1k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
670
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k

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