Iconography supports an idea or points the way. In this way our iconography should be graphic and bold—pointing the way with unmistakable clarity. Icons can also be used effectively to call out certain items or things like features or benefits. They can draw attention to something otherwise boring and help it become a bit more compelling. Avoid using icons decoratively or to communicate complex concepts. If there is a need to create a new icon, please submit a new project request to the creative team in Asana.
Icons for Weave products
Digital Forms
Web Assistant
Phones
Messages
Customer Insights
Scheduling
Payments
Team Chat
Analytics
Reviews
Email Marketing
Unify
Icons for Weave features + other concepts
Text to Pay
Mobile App
Call Recording
Missed Call Text
Reminders
Two-way Text
Quick Fill
Fax
Call POP
Wellness Forms
Icon sizes
Flat, big floods of color, subtle grainy texture overlay applied for visual flair. Content-wise: quickly show how weave products work, and bring the platform to life.
Icon layout for use in marketing
Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).
If additional visual weight is needed, content may extend into the padding between the live area and the trim area (the complete size of a graphic). No parts of the icon should extend outside of the trim area.
Live Area
Icon content is limited to the 46px x 46px live area, with 2px of padding around the perimeter.
Padding
2px of padding surrounds the live area.
Icon grid and keyline shapes
The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.
Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons.
Grid
Keyline
Keyline shapes
Specific keylines are present for certain shapes: circle, square, rectangle, orthogonals, and diagonals. These basic shapes help unify Weaves product and feature icons and regulate their placement on the icon grid.
Square
Circle
Horizontal Rectangle
Vertical Rectangle
Corners and strokes
Corners
Corner radiuses should always remain 5px by default.
Strokes
Icons used in marketing use a consistent stroke width of 1px, including curves, angles, and both interior and exterior strokes.
