The making of a product icon | Figma Blog (opens in new tab)

Figma product icons are the result of extensive exploration rather than a single inspired sketch. Designer Tim Van Damme combines consistent visual rules with product-specific research, then develops dozens or hundreds of variations before refining the final symbol. The process balances recognizability, scalability, and a distinct identity across Figma’s expanding product suite.

Building a Consistent Icon System

• Figma previously had no formal icon-design system, so Tim created unofficial guidelines to ensure the icons worked as a cohesive family.
• Core principles include:
  • One-pixel-wide strokes
  • One-pixel-thick cutouts
  • Rounded caps
  • Balanced compositions that use the available space
  • Three standard sizes for different surfaces
• Icons must work everywhere from toolbars to large marketing displays and billboards.
• Designs are rejected when lines blur or visual elements become indistinguishable at smaller sizes.

Finding the Product’s Core Idea

• Each icon must follow Figma’s broader visual language while representing the identity of its specific product.
• Tim collaborates with design and product teams to list concepts, themes, and associations connected to the product.
• For Figma Community, ideas such as shared learning, connection, and knowledge exchange inspired experiments with people, trees, and books.
• For Figma Buzz, themes including magic, creation, and AI image generation led to explorations involving glass orbs, stars, and bees.

Exploring Through Extensive Iteration

• Tim uses Figma’s variable-width strokes and simultaneous vector-layer editing to speed up experimentation.
• He develops large families of related symbols, gradually adjusting shapes, proportions, movement, and composition.
• Creative exploration can transform one idea into another—for example, trees into faces, faces into mandalas, or abstract shapes into interlocking forms.
• For Figma Make, he explored motion and transformation through wheels, butterflies, compasses, and fidget spinners.
• For Figma Buzz, he created hundreds of bee variations, changing wings, antennas, and line treatments before narrowing the options.

The practical lesson is that effective product icons emerge from a structured but highly exploratory process: establish shared rules, identify the product’s essential meaning, and iterate freely until the symbol is both distinctive and immediately legible.