Catnip icons are used consistently to communicate effectively, allowing users to instantly recognize their meaning and achieve goals faster. It enhances usability by providing recognizable symbols, guiding users through interfaces more efficiently than words alone.
Our icons grid ensure proportionality and symmetry across different icons. In addition are we using basic template shapes - circle, square, several rectangles, that guide the creation of icons. These shapes offer a wide range of design possibilities, from simple to more complex icons.
We have several themes to organize the icons: Action, Users & Security, Notifications, Technology, Navigation, Image & Docs, Development, Identification Finance & currency, Calendar & Time, Theming, Dashboard & Graphs, Media & Player, Others / Misc.
.svg)
In our basic 24 px icon size, the line thickness is 1.3 px. Catnip offers two stroke states: Editable stroke mode and Outline or dev mode. Please add 2px - 4px to the corner radius to all of the icons. All stroke caps should be rounded at the ends of strokes to achieve a consistent look.
This is a mode where you create or modify your icon. Use the grid layer to help you position items within the icon and ensure that centered inner elements, like circles, are sized consistently with other icons in the system.
This is the mode where you have the final version of your icon. To fully prepare the icon for global use, please follow these steps:
Outlined Dev mode icon is proportionally scalable. Icons can be scaled down or up while maintaining their proportions. Ensure the grid size is divisible by 8 for scalability. Design with scalability in mind to maintain legibility and visual consistency across different contexts.
