Behind the design: crafting over 800+ icons for Webflow’s rebrand

Webflow recently undertook a comprehensive rebrand and redesign of its product, focusing on refining its iconography with an emphasis on simplicity, usability, and pixel perfection. The design process involved reducing the variance of icon sizes and opting for a stroke approach rather than fill to align with the updated UI typography, resulting in a cohesive and modern visual style. While exploring abstract styles presented challenges in user recognition, the team prioritized clarity and functionality, ensuring each icon was sharp even at small sizes. Notably, the "publish" icon, represented by a rocketship, was designed to evoke excitement and motion, while other icons like "settings cog" and "data binding" underwent numerous iterations to achieve balance and clarity within the icon library. The process highlighted the importance of thoughtful design decisions, resisting unnecessary complexity, and maintaining coherence across the product's visual language.