Icons
Overview
The icon component visually represents actions, navigation, or status using recognizable symbols. It helps users quickly understand functionality and enhances visual clarity across the interface.
The icon component supports three states:
-
Default
-
Selected
-
Disabled
Default
The Default state represents an enabled icon that is not currently selected.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Selected
The Selected state represents the active or currently chosen icon.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Disabled
The Disabled state represents an icon that is not available or not supported for interaction.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨ Icons should be simple, intuitive, and easily recognizable.
✨ Use a consistent icon style across the product to maintain visual coherence.
✨ Hover states should clearly indicate interactivity for enabled icons.
✨ Selected icons must be visually distinct from Default icons to indicate the current state.
✨ Disabled icons should clearly communicate non-interactive status and should not respond to user input.
✨ Icons used for navigation should accurately reflect the current active destination.
✨ Avoid using icons without labels unless their meaning is universally understood or well-established.
Figma
All details and specifications in the design can be referenced through the Figma link below.