Designing Yahoo’s Winter Olympics Icons

Behind the scene of Yahoo’s PyeongChang 2018 Winter Olympics icons

You may have watched some Winter Olympics games that are happening in PyeongChang. I had a chance to work together with Yahoo to create their own version of the icon that they’re using on their platform now and I’m happy to be able to share my process a bit.

Oh, by the way, PyeongChang has their own awesome icon set — However, Yahoo decided to create their own set because they need the icon works in the small size (I’m talking 20px here).

Get to know the sports

Grew up without snow whatsoever, all my life, I have no clue about winter sports. 🤡 Let me be silly for a second, I didn’t even know winter sports exist, I mean.. who would’ve expected you can do such activity with such amount of snow, right?


The first observation I did was a thorough research where I watched lots of recorded 2014 Winter Olympics games to gain context for each sport. Not only this project is involving human figures, the icons have to be simple enough so it works on the small size and have to get the right pose to represent each sport.

Build the fundamental

Once I have enough understanding of the sport, I start to analyze the most extreme poses for each sport — with the goal to capture the common poses that are easy enough for our brain to make a connection between the pose with the sport.

Yahoo have a great Design System for human figure icon in place that I use and adjust a little bit to create a guideline of the proportion and simplified anatomy as a reference.

Capturing the pose

To give you an idea of the process, I’ll take snowboarding for an example. Normally it starts with a reference and I draw a bunch of icons very loosely and take the best options.

Depends on the sport, generally speaking, the best/memorable pose for our brain is when the athlete make an extreme/elegant move.

At this point, the client involved a lot in the process of discussion, giving feedback and validate my thinking behind why these are the best candidate for the final icon.

Quick tips:

  • Don’t work in a silo, keep the discussion going and get feedback often.
  • Start with low-fidelity and time-box your exploration time.

Style development

After we nailed the poses, Ryan (Design Director) emphasized the need for the icons to solve both utility and style with a distinguish characteristic. We shaped this style together and it’s a result of a great collaboration!

First draft is too monotone and not fluid. After a couple of iteration, Ryan mentioned about the fluidity we can achieve on the tapered leg (which is awesome).

We ended up by utilizing tapered leg and fluid shapes to convey the movement even better. We also utilizing the whitespace to give more clarity of the action. You can see how the style start to coming along on the figure skating icon(above). We use these same principles to all icons whenever possible.


After I have the finalized sketch and Yahoo’s team is happy with the sketch, I jump to Illustrator and start digitizing them. Using almost the same technique when digitalizing typography and make sure every point are in the right pixel placement.

Sometimes adjusting small details like the tapered leg is an easier adjustment to do on the digitalizing process.

from left to right: Sketch on iPad, vectorized fill, vector check on grid placement

Final result

It took us 2 weeks to work together and complete this icon set. This icon set is currently being used in their search platform. I hope by sharing this process I can inspire some of you who love icon to start learn and make some icons.

Big props for Ryan McCullah to help art directing this project and help me throughout the process with some ideas and great feedback!

We were optimizing this icon set for small size, this is the final result looks like.


I often get a question about the tools I used and in case you’re wondering about them:

  • Procreate + iPad + apple pencil
  • Adobe Illustrator
  • Macbook pro 15"

All of the images above are the Intellectual property of Yahoo. Please do not use this without our knowledge and permission.



-- — Head of Design in Indonesia education civic tech. Previously: Bukalapak, Shopify. Other clients: Yahoo, Palantir, Marvelapp.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Human-Computer Interface

MEDCTRL — A Comprehensive Medical Translating App

Customizing the Design Sprint: the three-in-one Master Sprint

How to scale up and go full-stack

Is it ever too early to be retrospective?

Welcoming the Overflow plugin for Adobe Photoshop

Whole Bank — A Solution for Travellers

Week 3 Spark Forum

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Budi Tanrim

Budi Tanrim — Head of Design in Indonesia education civic tech. Previously: Bukalapak, Shopify. Other clients: Yahoo, Palantir, Marvelapp.

More from Medium

5 Great Sans-Serif Google Fonts to use on your next project

5 Great Sans-Serif Google Fonts

Colour theory and usage of colours in design

How to get started with Canva

Use scale and proportion in mockups