Icon

Icons are visual symbols that communicate meaning quickly, guiding users through actions, statuses, and categories. They are crafted with consistent proportions, line weights, and styling to ensure a cohesive look across all components

There are 4 types of icon set:

Generic icon: Simple, universal icons used for common functions across websites.
WYSIWYG icon: Icons that represent content formatting tools in text editors.
Social media icon: Icons used to link to social media platforms.
Media icon: Icons that represent file types often used in file uploader or previews.

Icon design guidelines

Grid size

Our icons are designed within a 20x20 grid as the base size. These icons can later be resized to fit any situation.

Stroke width

Every icon preserves its 1.5px stroke width (at 20x20 icon size) after being exported as an SVG file, giving developers more flexibility to adjust them in code.

Sizes

To maintain consistency and visual balance, it is recommended that the stroke width adjust proportionally with the icon size.

Size (px)	Where to use?
16x16	Used in Small button
20x20	Used in Medium button
24x24	Used in Large button
32x32	Used in Alert dialog
42x42	Used in Alert dialog

Generic Icon

A set of 20x20 icons for common actions like search, add, edit, remove, and settings. These icons are designed for clarity and consistency, ensuring they are easily recognizable and functional.

Outline icon

Filled icon

WYSIWYG Icon

A WYSIWYG ("What You See Is What You Get") icon represents a text editor where users format content visually as it will appear on the final page, making editing intuitive without needing code.