Icons
Spaceship icons translate complex actions and ideas into instantly recognizable symbols, helping users navigate and interact with ease.
Universal yet distinctive, our icons are the smallest building blocks of the brand, designed for instant recognition while clearly retaining the Spaceship identity.
Versions
All Spaceship icons are available in two versions: outlined (primary) and filled (secondary).
Construction
Icons are designed according to defined rules — from base grid to stroke parameters — ensuring consistent and balanced results.
Size
Scalable by design, icons should be used in five sizes to preserve clarity and visual harmony throughout the system.
Colors
Color is an essential element that helps users identify their products more easily within a particular interface. To ensure consistency in these UI contexts, icons use Spaceship Design System colors.
Brand colors
As Spaceship’s core colors, these should be the primary choice for icons — whether in functional contexts like the platform UI or in more illustrative uses, such as feature representation on product pages. Check out the color page for further details.
Product colors
A product’s main colors should be applied to its respective icons. This is key for product recognition and awareness across the Spaceship ecosystem.
Notification colors
Use notification colors to reinforce alert messages. They should be applied only to the alert icons, with occasional exceptions where another icon also represents success, error, or warning states.
Guidance
Here are some examples of what to avoid when using icons.
Do not distort, rotate, or flip icons. Always scale proportionally.
Do not use icons bigger than 40x40px. Aim for balance between elements.
Do not use tints or shades.