Designing chess icons
Modern icons for a 1400 year old game
Chess is a game played by millions of people worldwide. It is believed to have originated in India sometime before the 7th century. It’s also been a popular game on computers — due to the rule-based nature of the game, it has been a popular choice for computer programs since the advent of computing.
Last year I was approached by Zach, the developer of Chess World, to design a set of icons for the Chess World Android app. He was unhappy with the existing options and wanted a custom set for his app.
I started with looking at what chess icons typically look like on computers, and found this.
These are the Unicode chess glyphs in Arial, and they pop up all over the internet. If you’re looking at chess pieces somewhere on the internet, chances are you’re seeing ♔♕♖♗♘♙ ♚♛♜♝♞♟.
As the de-facto standard, they are used by many apps and websites, but their visual design is a little dated. I wanted to go with a more modern look for my set.
Goals
Some goals I had in mind while working on the icon set —
1. Visibility at small sizes
Since the primary use case for the icons was on phone screens, they had to be distinctly visible at a physical size of about .5cm x .5cm. The bishop and pawns had to be distinct from each other even at smaller sizes.
2. Fitting in a square
A chessboard doesn’t look like a chessboard unless it has dark and light squares — emphasis on squares. This meant that the pieces necessarily needed to fit in a square box. To efficiently use the space, the pieces couldn’t be very tall — and would ideally have to be about as tall as they were wide.
3. Looking good on dark and light backgrounds
Something I only realised halfway into designing the set was that I also need to look at the inverse designs — white on black. I had to make some adjustments to the designs based on what the icons looked like with flipped colors.
Initial Sketches
I wanted to break down each piece into it’s most recognisable elements, and so I tried to draw each piece with a thick marker without looking at any references. This helped to identify which part of each piece I could focus on in order for it to be instantly recognisable.
I fired up Illustrator and worked on turning my basic ideas into simple shapes. It took a while to refine my (very) rough sketches into something that looked like this.
The final result
The final icons went through a series of refinements based on in-game testing. I added a white outline to the black shapes and vice-versa to make sure the icons stood out on squares of both colors.
My name is Gyan and I solve problems with design and technology. If you’d like to get in touch, send me an email at hello@gyanl.com or tweet to me @gyanl.
