The making of a product icon
Creating product icons at Figma involves dozens—sometimes hundreds—of iterations. Product Designer Tim Van Damme shares his thoughtful approach to icon design and the creative exploration that shapes each final result.
Tim Van Damme has made more icons for Figma than he can count. This year, as we prepared to double our product suite, he designed four new product icons and redesigned the existing ones to make sure they cohered as a set.
For Tim, this meant pushing past the expected and obvious. Between hundreds of variations of bumblebees for Figma Buzz and countless revs of stars and wands for Figma Make, Tim’s process shows that following a formula doesn’t mean formulaic results. Here, we take a behind-the-scenes look at how Tim transforms big ideas into polished symbols through a blend of creativity and curiosity.
Step 1: Start with a set of guidelines
How do you distill an entire product down to a single symbol? And what makes a “good” icon anyway? These are questions Tim has been asking himself since his first month on the job. After discovering there was no official system for creating Figma icons, Tim built his own set of guidelines, unofficially cementing his role as de facto icon designer.
To ensure this cohesion and visual consistency, Tim starts with these guidelines, which include principles like:
- All strokes are one pixel wide.
- Cutouts are one pixel thick.
- All caps are rounded.
- Icons feel balanced, filling out the available space as best as possible.
- Icons are created in three sizes to work across all necessary surfaces.
As he’s designing, Tim considers how the icons will scale for different formats. In addition to living in the toolbar, these icons stretch across 40-foot billboards and marketing materials, forming a visual foundation for Figma’s growing ecosystem. Sometimes this is an easy way to eliminate an initial mockup of an icon—if the individual lines start to blur together when zoomed out and elements are hard to distinguish, he moves on to the next version.
Step 2: Get to the root of the product
Beyond meeting Figma’s brand guidelines, each icon needs to represent the visual identity of a specific product.
“We have to communicate a lot of detail within a small space,” Tim says. To align on which detail matters most, Tim and other members of the design and product teams brainstorm a list of key concepts that correlate with each product, riffing on related words and themes to spark inspiration.
For example, when crafting an icon for Figma Community, Tim searched for a design that would reflect the spirit of learning and sharing ideas. He jotted down phrases like “connection through community,” “peers exchanging knowledge,” and "learning together” to inform his creation. This led him to experiment with symbols of people, trees, and books.
Similarly, when designing the icon for Figma Buzz, Tim and the team explored themes like magic, creation, and AI image generation—sparking iterations on glass orbs, stars, and other magic-inspired forms.
Step 3: Iterate and evolve the idea
Tim saves time on dozens of icon iterations by using variable width stroke and editing multiple vector layers at once.
Armed with design parameters and early ideas to build on, Tim begins exploring in earnest. This is where his expertise comes to life, as he creates dozens of iterations of a family of icons, pushing and tweaking each symbol slowly and surely. Trees become faces; faces become mandalas; abstract shapes rotate and intertwine. This kind of iterative, hands-on experimentation is rooted in years of experience, but it’s also fueled by his love of creative play. “I do a lot of creative wandering, just to keep that part of the brain going,” he says.
For Figma Make, he spent hours playing with concepts of motion and transformation, drafting wheels, abstract butterflies, compasses, and fidget spinners. And, for Figma Buzz, he spent a day creating hundreds of versions of bee symbols, with varying wing shapes, lines, and antennas.
Finally, Tim checks the cohesion of each new icon within the broader collection. Does one stand out too boldly among the rest? Do they feel disjointed? Is their functionality differentiated enough? “Every single icon is unique, but in the end, if you put 20 of them together, you should be able to say, ‘Those are Figma icons,’” Tim says.
Every single icon is unique, but if you put 20 of them together, you should be able to say, ‘Those are Figma icons.’
Step 4: Invite input along the way
Tim frequently solicits feedback from product designers and product managers, guiding the conversation with a one-to-five star rating to show how confident he is in a design. The input he gets can range from straightforward (“too much happening, overly intricate”) to vague (“this doesn’t feel right”). Sometimes a day’s worth of creation gets scrapped with a single piece of feedback like “we shouldn’t do bees”—which led, in this instance, to exploring megaphone icons for Figma Buzz. For Tim, it’s all just part of the process. “It’s a life experience,” he says. “Even though we went a different direction, I can still say that no one has ever put more time and effort into trying to come up with the perfect bee icon.”
One of Tim’s favorite features is the stroke panel in Figma Draw, which has saved him many hours and clicks by giving him all the controls he needs when designing in one place.
Sometimes, Tim searches for feedback in broader pastures. When recreating the FigJam icon, he asked around the entire company to see what words and ideas people often associated with the product. The overarching word that came back was “stickies,” so the new icon took the shape of a sticky note. He did the same for the launch of Figma Make, Figma Buzz, Figma Sites, and Figma Draw, collecting feedback in a public Slack channel. “Not all designers like to work that way because there’s a lot of input,” he says. “But I love engaging with non-designers and getting to hear what they think. I like to say, ‘Look at this icon. What do you see? What do you feel?’”
I love engaging with non-designers and getting to hear what they think.
Step 5: Push towards the final product
In the final stretch, intuition plays a part. For example, when designing the new Community icon, Tim scrapped early explorations of a book symbol, fearing it would too closely mirror an existing symbol in the Figma library. But, once he combined the outlined figures from Figma’s very first Community icon with the book, something clicked. “It felt so powerful. I still have a hard time explaining why. But when I look at the icon, it just makes me feel something,” Tim says.
As he zeroes in on his final picks, Tim gathers six icons to bring to the leadership team. With so many refinements, iterations, and rounds of feedback built into the process, the ultimate decision becomes more straightforward. The group considers each option through the lens of Figma’s design system, Tim’s icon guidelines, how well they mesh with the broader family of icons, and one less measurable factor: a gut feeling.
Emma Webster is a writer and editor on Figma’s Story Studio team. Previously, she’s worked as a writer at Faire and Audley Travel.
