JobCannon
全部技能

Icon Design System

⬢ 層級 2工具
中等
薪資影響
3 個月
學習時長
中等
難度
1
職業
一覽

Icon Design System encompasses creating icon sets, establishing design rules (grid, stroke, size variants), documenting in Figma, and implementing across web/mobile. Used by design teams, product companies, and design systems teams. Mastery takes 3-4 months for designers. Icons are 80% of visual communication in UI; system consistency = professional appearance and developer efficiency. Commands 10-15% premium because icon systems save 20-30% implementation time. Essential for design systems roles, product design, and companies scaling UI consistency across products.

什麼是 Icon Design System

Icon Design System is the discipline of creating a cohesive set of icons with consistent visual rules, size variants, and implementation guidelines. Icons communicate actions, status, and concepts in user interfaces. A system ensures icons are recognizable, accessible, and efficient to produce and update. Practitioners define grid rules, stroke weights, size variants, and styling conventions. They organize icons in Figma libraries, document usage guidelines, and coordinate implementation (SVG export, CSS, icon component). A mature icon system includes filled and outlined variants, accessibility considerations, and version history.

🔧 工具與生態
FigmaIllustrator or vector toolsDesign tokensIcon automation (Icomoon, Figma plugins)SVG optimizationCSS icon librariesDocumentation tools

💰 各地區薪資

地區初級中級高級
USA$65,000$105,000$160,000
UK£42,000£68,000£105,000
EU€46,000€75,000€115,000
CANADACA$68,000CA$110,000CA$170,000

🎯 使用 Icon Design System 的職業

Technical Writer

❓ 常見問題

What's the optimal icon grid size and stroke weight?
Grid: multiples of 8px (8, 16, 24, 32, 48, 64, 128px) align with design system grid. Stroke: 2px for 24+px sizes, 1.5px for 16px, 1px for small. Consistency in grid and stroke = polished appearance. Test in context (on backgrounds, button states) before finalizing.
How many size variants should an icon system have?
Typical: 4-6 sizes (16, 24, 32, 48, 64, 128px). Each size should be redrawn (not just scaled) for optical adjustment and clarity at small sizes. Small icons (16px) need simplified details. Large icons can have complexity. Design and test each size.
Should icon systems include filled and outlined versions?
Yes, generally. Outlined (stroke) for lightweight appearance, filled for emphasis. One library with both (switch in Figma) is more maintainable than two separate libraries. Use design tokens to toggle style. Document usage rules (e.g., outlined for navigation, filled for action emphasis).
What's the best format for implementing icons: SVG, font, or bitmap?
SVG: scalable, colorizable, accessible. Best for web/mobile. Font: historical, still used, accessibility issues. Bitmap (PNG): inflexible, deprecated. Default to SVG. Export as SVG from Figma, optimize, implement in code. Auto-generate at build time for consistency.
How do I ensure icon system consistency across design and development?
Single source of truth: Figma library. Designers work in Figma, export as SVG. Developers import SVGs, use icon component. Documentation in shared (Figma, Notion). Version icon system (v1.0, v1.1) so breaking changes are managed. Design review before adding new icons (consistency check).

不確定這項技能適不適合你？

做一下職業匹配，我們會推薦合適的方向。

找到最適合我的技能 →

找到理想的職業方向

在 2,521 個職業中進行技能匹配。免費。

免費做職業匹配 →