💠 Icon

Visual representation of a command, device, directory, or common action.

Usage

An Icon component serves as a graphical representation of an action, entity, or concept, often encapsulating it in a simple and recognizable visual form.

Icons in user interfaces help convey information quickly, saving space where text would be too cumbersome.

They can enhance cognitive recognition, assist with navigation, and add aesthetic value to the design.

When to use

• Action prompts: Use an Icon component to represent common actions like deleting, editing, sharing, or adding content, allowing users to perform tasks with minimal interaction.
• Interface enhancement: Employ Icons to enhance the user interface, making it more visually appealing and user-friendly.
• Space efficiency: Utilize Icons in situations where space is at a premium, such as mobile interfaces, toolbars, or tabs, where they provide essential functionality without taking up much room.
• Visual communication: Icons can be used to communicate status indications, such as error, success, or in-progress states, or to categorize items like files or contacts.

Avoid using Icons in isolation where their meaning may not be clear without additional context. Icons should not carry the entire weight of communication, especially in critical or complex actions where misunderstandings could occur. Additionally, avoid using an Icon that is too abstract or unconventional as it may confuse users who are unfamiliar with the metaphor being presented.

Icon Gallery