Circle, Illustration

Circle UI icon library

With the limitations of a small design team, early versions of Circle Pay included only a handful of custom glyphs for transaction types, otherwise relying upon off-the-shelf icon sets.

But after I joined and began creating illustrations for product and brand, I soon set my sights on icons. I made a few as needed, but replacing the old set entirely was off the table. I had arrived too late, and a full, page-by-page icon overhaul wasn't worth the design and development committment.

But with Circle Invest, I was there from the beginning. I had the opportunity to craft every single glyph, from UI basics to tab bar icons, the app's major navigational anchors. Every new feature—scheduled recurring buys, multi-asset bundles, the educational “Explore” section—received a custom graphic.

An early prototype of Invest’s tab bar. I produced this to communicate to developers how the icons should animate.

An early prototype of Invest’s tab bar. I produced this to communicate to developers how the icons should animate.

Final icons for Circle Invest’s tab bar and crypto asset collections

Final icons for Circle Invest’s tab bar and crypto asset collections

I even created custom icons for each asset sold in the app, presenting over a dozen independent crypto projects in a unified, cohesive manner. These crypto icons became a central piece of Circle Invest’s visual brand, and later formed the basis of a much larger library for Poloniex.

Poloniex came to Circle by way of acquisition, and as such, I haven't yet been able to tackle all the icons. But every new feature and redesigned section brings new opportunities.

Icons - Poloniex nav.png

The native apps' navigation bar received a significant update with the re-launch of the Trollbox, Poloniex’s storied live chat room. The Trollbox icon itself is a bit of branding through character design, a fiery little character that captures the Trollbox's rambunctious spirit — and whose wild hair is reminiscent of some capital-T Trolls, but you didn't hear that from me! 🤫

Lastly, the launch of Poloniex's new “Activity” tab required custom icons for every transaction type: buys, sells, loans, staking rewards, and more.

Every activity type or category on Poloniex gets an icon. Coloring is dependent on the active theme (light vs dark mode), as well as whether the icon is used as a noun (to describe a completed or pending transaction) or a verb (a button to initiate a new action).

Every activity type or category on Poloniex gets an icon. Coloring is dependent on the active theme (light vs dark mode), as well as whether the icon is used as a noun (to describe a completed or pending transaction) or a verb (a button to initiate a new action).

 

An Iconic Brand

The comprehensive use of custom icons has helped define and express Circle's brand across every product and platform. Our distinct visual voice shines through interactions big and small, from initiating a trade to closing a modal.

The Circle UI icon library covers basic UI interactions, financial actions and accounts, QR code scanning, and more

The Circle UI icon library covers basic UI interactions, financial actions and accounts, QR code scanning, and more

 
 

More Illustration Projects