Icon
Last updated
What is Icon?
The icon component is a way to align the way iconography static assets are displayed in the product.
- Sizes: Icons should have a number of predefined sizes to provide a holistic experience across the product. Typography pairings may be used for these size values to ensure that they are aligned with the text sizes.
- Colors: Icons should be using values from the design system colour palette. Using parent element text colour for icon fill colour can make this automatic.
More in stage 9: Project Management
- Project Management
- Avatar
- Input Text
- Banner
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- Card
- List
- Carousel
- Loading Indicator
- Dropdown
- Modal
- Tabs
- Select
- Toast
- Textarea
- Tooltip
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Icon: common questions
Can I learn Icon in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Icon in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Icon tutorial for beginners?
It is lesson 98 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.