Icons
Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
Size
The medium size (24px) is our most common size based on our regular text size. Some of the icons are also available in small (16px), large (32px) and 2xl (75px) sizes to accomodate with the scale of surrounding elements.
Never resize an icon, we design each icon to display properly at the defined sizes.
Key shapes help to create a consistent visual weight across icons.
Secondary metaphors
Icons can support a secondary meaning by overlaying an indicator in the bottom-right corner.
Colors
By default, icons inherit the color of the surrounding text.
Some icons are also provided with a color variant related to their function.
Library
How to use the icons
Website
Icons are available in various colors in the jenga-assets/icons folder of Hubspot Files.
NPM package
The icon library can be loaded with the @proxyclick/hello-icons NPM package.
Individual files
Coming soon ;-)