Iconography

Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, draw attention to important information, and save space.

Icon Library

We use an external library like Tabler Icons or Lucide for our base set, ensuring all icons share the same visual style, weight, and corner radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sizing and Alignment

Our icons are designed to fit perfectly within specific bounding boxes to ensure optical alignment.

• Small (16px): For dense UI or inline text.
• Medium (20px): The standard size for buttons and general use.
• Large (24px): For prominent actions or marketing sections.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Best Practices

• Always use the semantic or recognized icon for an action (e.g., a floppy disk for "Save").
• Avoid using icons without text labels unless the meaning is universally understood.
• Ensure the icon color has sufficient contrast against its background.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.