Icons are visual representations of commands, directions, notifications, navigation, or common actions and are used to provide visual context and enhance usability. They should be simple, yet bold enough to grab attention.
We use 2 distinct styles of icons. The 24px icons are to be considered our system icons and are used to indicate action, direction or general command. The 48px or 64px icons which we call Medium or Big, are used to elevate our content and visual identity. They are used more as design elements.
Our system icons aims to be fluid, communicative, and friendly. Each icon has a 2px outline/border. While some instances support a color fill without the border. System icons are used to indicate action, direction or general command. System icons are constructed within the 24px grid frame.
Our medium to big icons aim to be straightforward, playful, chunky and communicative. Each icon has a color fill. The Medium and Big icons, are used to elevate our content and visual identity. They are used more as design elememnts. Medium and Big icons are constructued within the 48px or 64px grid frame.
We are using 24, 48, and 64px grid frames for each icon type. The grid frame represents the overall size of the icon, while each fram has an additional spacings to offer balance and readability for each icon. The grid frames are constructed as follows:
24x24px grid frame, 2px margins with icon sizes at 22px or less.
48x48px grid frame, 4px margins with icon sizes at 44px or less.
64x64px grid frame, 4px margins with icon sizes at 60px or less.
