Icons and How They Are Prepared
summary
The talk surveys icon tooling history and current approaches, explains why many different solutions exist, and presents a single, old-but-effective solution based on early-2000s web technologies (the presenter’s company actually implemented it). The speaker contrasts modern practices (including mistaken PNG-sprite usage) with this simple, pragmatic approach, and reports initial production metrics showing very good results.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 1:49Reassessing icon work
- 2:32Icon approach problems
- 4:20Icon types: vector, raster, fonts
- 12:52Icon component requirements
- 16:47CSS filter recoloring issues
- 17:59Mask-image solution
- 20:33Automated icon generation
- 23:49Caching and cross-domain limits
- 27:47Unified icon component
- 29:58Performance impact
- 31:01Q&A: Naming
- 32:04Q&A: Sizing
- 34:11Q&A: Migration
- 36:33Q&A: First paint loading
- 37:37Q&A: Next steps
- 39:21Q&A: Figma export
- 40:23Q&A: Sizing detection
- 41:53Q&A: Color changes
- 42:16Q&A: Icon fonts comparison
- 43:41Q&A: Sprite usage
related talks
47mThe Icon Design Process
23mThe Past, Present, and Future of Favicons
46mIcon Zoo: Simplifying Icon Work for Design and Development
46mLets Design an Icon Set
22mCrafting better App Icons
47mBuilding Author Friendly Icon Systems in Drupal
33mDesign hacks for the pragmatic minded
48mAdaptive Icons: Case Studies & Principles of Design