Designing an Icon Family
![](/assets/images/moonfare/hero.webp)
One thing that I love about leading design is the chance that I get, now and then, to roll up my sleeves and help my team deliver projects. At Moonfare, I joined the company amid a big rebranding initiative. My responsibility as a team was to manage areas of the product touching the company's website and also the users' application. One of the central pieces for the rebrand was the website, which also happened to be the main source of business leads. As part of its site content structure, Moonfare relied heavily on icons to convey navigation and product offerings, and it was also a key asset for the newly launched investment training area, Private Equity 101.
The branding agency Barkas has delivered a brilliant, comprehensive brand guide, but there were only hints of directions concerning user interface. The job then was to use those directions to create a new icon family for the website and, later on, the internal applications. I led this initiative, connecting the agency, our internal brand lead, and the design system designer to prepare the icons for the big brand launch. The biggest constraint was time. We had only a few weeks to design 60+ icons and guidelines for the new icon set.
Research
![](/assets/images/moonfare/01.webp)
![](/assets/images/moonfare/03.webp)
The research consisted in finding what visual features would meld the icons with the new brand. The new logo was the best piece to understand the geometry and patterns we needed to represent. The stylistic solution for us to connect the icons with Moonfare's new brand was defined as:
- A balance between sharp and round corners
- Thick borders to contrast with the minimal brand style
- Open gaps to create a sense of dimensionality
Icons allow complex concepts to be represented through simple forms. This feature was crucial for us since terms such as Funds, Fees, or Venture capital were among the abstract concepts that needed visual representation.
We tackled the abstraction by defining analogies and testing different ways to represent concepts. Very interactive live collaboration sessions accomplished that.
The Method
After compiling an inventory of icons, I split them into three groups and randomly distributed them between the brand director, the design system designer, and me. In our first session, we defined what characteristics would make the icons connect as a family and worked to create as many variations and styles as possible. What worked well for us was to run 2 to 3 hours of online pairing sessions. We played some music and kept our mics open as we worked. As soon as one of us had ideas and breakthroughs, we'd share it right away. That worked well, as we agreed on the stylistic direction and metaphors.
![](/assets/images/moonfare/02.webp)
![](/assets/images/moonfare/17.jpeg)
As the creative direction was defined, we went through labor-intensive work to create all icons within our assigned group. From our project spreadsheet, we could mark the progress by tagging icons through multiple statuses including ready to be reviewed. As the project lead, I was the owner of the definition of done and responsible for reviewing and making final adjustments to all icons to ensure consistency on a pixel level.
Conclusion
It took us three weeks to finish the work we committed to, from the first engagement with the brand agency to having all final icon assets. I was extremely proud of the pragmatic approach, collaborative process, empathy, and support our team showed along the way, but more importantly, the level of quality achieved by the team.
Icons are often outsourced pieces of work. There's a reason for it. It's simply hard work that design teams find it hard to justify the time and effort put into it and also the lack of internal experience in developing them. The importance of icons, though, shouldn't be taken for granted. They are an asset that bridges the gap between marketing and product, and they normally act in a stealth mode, supporting users' decisions, informing them of concepts, taking their attention to the right places, making their experience more accessible, and serving as an overall powerful visual aid. It's impressive how these little, often unnoticed, graphics are in every part of our daily lives; look around.
Guidelines
![Moonfare Brand Book - 00.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 00.png)
![Moonfare Brand Book - 01.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 01.png)
![Moonfare Brand Book - 03.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 03.png)
![Moonfare Brand Book - 04.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 04.png)
![Moonfare Brand Book - 05.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 05.png)
![Moonfare Brand Book - 06.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 06.png)
![Moonfare Brand Book - 07.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 07.png)
![Moonfare Brand Book - 08.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 08.png)
![Moonfare Brand Book - 09.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 09.png)
![Moonfare Brand Book - 10.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 10.png)
![Moonfare Brand Book - 11.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 11.png)
![Moonfare Brand Book - 12.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 12.png)
![Moonfare Brand Book - 13.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 13.png)
![Moonfare Brand Book - 14.png](/assets/images/moonfare/guidelines/Moonfare Brand Book - 14.png)
Final Icons
![A3, B, C.png](/assets/images/moonfare/final icons/A3, B, C.png)
![Biotech.png](/assets/images/moonfare/final icons/Biotech.png)
![Check.png](/assets/images/moonfare/final icons/Check.png)
![Dedicated support.png](/assets/images/moonfare/final icons/Dedicated support.png)
![Expansion EU.png](/assets/images/moonfare/final icons/Expansion EU.png)
![Founded.png](/assets/images/moonfare/final icons/Founded.png)
![Presence HK.png](/assets/images/moonfare/final icons/Presence HK.png)
![Real Estate.png](/assets/images/moonfare/final icons/Real Estate.png)
![Secondaries.png](/assets/images/moonfare/final icons/Secondaries.png)
![Seed round.png](/assets/images/moonfare/final icons/Seed round.png)
![Series A1.png](/assets/images/moonfare/final icons/Series A1.png)
![about us.png](/assets/images/moonfare/final icons/about us.png)
![access to materials.png](/assets/images/moonfare/final icons/access to materials.png)
![auction bidding.png](/assets/images/moonfare/final icons/auction bidding.png)
![blog.png](/assets/images/moonfare/final icons/blog.png)
![buyout.png](/assets/images/moonfare/final icons/buyout.png)
![careers.png](/assets/images/moonfare/final icons/careers.png)
![compensation.png](/assets/images/moonfare/final icons/compensation.png)
![crypto.png](/assets/images/moonfare/final icons/crypto.png)
![culture and coffee.png](/assets/images/moonfare/final icons/culture and coffee.png)
![direct investment.png](/assets/images/moonfare/final icons/direct investment.png)
![diverse.png](/assets/images/moonfare/final icons/diverse.png)
![elevate.png](/assets/images/moonfare/final icons/elevate.png)
![esg.png](/assets/images/moonfare/final icons/esg.png)
![events.png](/assets/images/moonfare/final icons/events.png)
![faq.png](/assets/images/moonfare/final icons/faq.png)
![fine arts.png](/assets/images/moonfare/final icons/fine arts.png)
![free lunches.png](/assets/images/moonfare/final icons/free lunches.png)
![friendly collaborative and social.png](/assets/images/moonfare/final icons/friendly collaborative and social.png)
![fully digital.png](/assets/images/moonfare/final icons/fully digital.png)
![fund structuring.png](/assets/images/moonfare/final icons/fund structuring.png)
![growth personal and transportation budget.png](/assets/images/moonfare/final icons/growth personal and transportation budget.png)
![growth.png](/assets/images/moonfare/final icons/growth.png)
![how it works.png](/assets/images/moonfare/final icons/how it works.png)
![inner circles.png](/assets/images/moonfare/final icons/inner circles.png)
![intro calls.png](/assets/images/moonfare/final icons/intro calls.png)
![matching.png](/assets/images/moonfare/final icons/matching.png)
![mental health.png](/assets/images/moonfare/final icons/mental health.png)
![newsletter.png](/assets/images/moonfare/final icons/newsletter.png)
![no GP fees.png](/assets/images/moonfare/final icons/no GP fees.png)
![no hidden fees.png](/assets/images/moonfare/final icons/no hidden fees.png)
![no membership due.png](/assets/images/moonfare/final icons/no membership due.png)
![ownership.png](/assets/images/moonfare/final icons/ownership.png)
![portfolio solutions.png](/assets/images/moonfare/final icons/portfolio solutions.png)
![portfolio.png](/assets/images/moonfare/final icons/portfolio.png)
![press.png](/assets/images/moonfare/final icons/press.png)
![referral bonus.png](/assets/images/moonfare/final icons/referral bonus.png)
![relax.png](/assets/images/moonfare/final icons/relax.png)
![relocation support.png](/assets/images/moonfare/final icons/relocation support.png)
![secondary market.png](/assets/images/moonfare/final icons/secondary market.png)
![signaling.png](/assets/images/moonfare/final icons/signaling.png)
![signing and writing.png](/assets/images/moonfare/final icons/signing and writing.png)
![skills assessment.png](/assets/images/moonfare/final icons/skills assessment.png)
![top equipment.png](/assets/images/moonfare/final icons/top equipment.png)
![top tier funds.png](/assets/images/moonfare/final icons/top tier funds.png)
![venture capital.png](/assets/images/moonfare/final icons/venture capital.png)
![webinar.png](/assets/images/moonfare/final icons/webinar.png)
![well funded.png](/assets/images/moonfare/final icons/well funded.png)
![whitepaper.png](/assets/images/moonfare/final icons/whitepaper.png)
![who we are.png](/assets/images/moonfare/final icons/who we are.png)