Bonnie Kate Wolf
  • Home
  • Work
    • Goods System
    • Illustration System
    • Square Icon System
    • OpenTable Icon System
    • Tutorial Video Brand Guide
    • Communities at Square
    • Room of Curiosity
    • Vegas Mural
    • Email Design System
  • About
  • Contact

Icon System

SQUARE

Brief

I was asked to fill out Square's marketing icon set. We had around 100 at that point designed by the design director, Ty. It was my job to figure out how to create a cohesive set that was accessible to everyone, and that satisfied multiple size requirements.

Challenges

Square's icon system has over 1000 icons. I built around 700 of our icons, taking over where our design director left off. All of them are built in Figma, meaning that they are easily accessible to both marketing and product designers. I then worked with our engineering team to implement all these icons into our manifest.
Picture
Marketing icons built at three sizes: 80x80, 40x40, and 24x24

Icon library

Picture
Picture
Picture
Picture
80x80 marketing icons
Picture
40x40 marketing icons
Picture
24x24 product and marketing icons

Icon guide

I built this guide to help product and marketing designers create their own icons. This documentation is crucial in helping tribal knowledge become public.

Specialty cases

While we have a clear set of rules, sometimes a project comes along that breaks some of them. Here's a handful of examples which demonstrate why having a base rule set is so important to creating consistency when you have to evolve.

Square Dashboard

In collaboration with the Dashboard product team, and speaking with the DRIs for all Square Products, I designed and built this icon set for Square Dashboard. Three sizes: 32x32, 24x24, and 16x16. These communicate all of Square's products.
Picture
Dashboard icons at 3 sizes for every product
Picture
Screenshot of the Square Dashboard (greyed out non-icon section)

Square Terminal

I work with the Design Systems team to develop specialty icons. This specially sized set was custom made for Square's new hardware: Square Terminal.
Picture
Icon set for Square Terminal
Picture

Animation

I had some opportunities to collaborate with colleagues to animate some of our icons.
Picture
Collaboration with Payroll team to explain Alice, a payroll third-party.
Picture
Picture
Picture
Collaboration with Caviar team to create icons which demonstrate how Caviar works.

In conclusion

This work blossomed into so much more than an icon set. It gave the company's illustration style a voice and allowed me to collaborate with so many designers and engineers. The production team and the design systems team gave me the support to succeed which helped all the product teams at Square.

Home

Work

About

Contact

All work © 2019 Bonnie Kate Wolf
  • Home
  • Work
    • Goods System
    • Illustration System
    • Square Icon System
    • OpenTable Icon System
    • Tutorial Video Brand Guide
    • Communities at Square
    • Room of Curiosity
    • Vegas Mural
    • Email Design System
  • About
  • Contact