Logos from screenshot of Responsive Logos. Used with permission.

Last fall, UK designer Joe Harrison unveiled his exploration of scalable logos. The result was Responsive Logos, a simplistic website featuring the logos of major brands such as Coca Cola, Walt Disney, and Kodak. As the viewer resizes the browser window, the logos respond, becoming both smaller, and stripping away elements. At the window’s smallest size, the smallest recognizable feature remains: Chanel’s interlocking Cs, the Guiness harp, Nike’s swoosh. As Harrison wrote on his website, “The concept aims to move branding away from fixed, rigid guidelines into a more flexible and contextual system.”

The logo project follows his earlier Responsive Icons project, in which a detailed graphic of a house resizes and sheds gables, windows, the chimney, and the door as the screen resizes. At the screen’s smallest size, only a simple house shape is left. Harrison started the project to explore “the perfect balance of simplicity in relation to screen size.”

Both projects utilize SVG files, deployed as image sprites. The sprites are packaged with CSS rules and media queries into an encapsulated SVG file. Smashing Magazine analyzed Harrison’s Responsive Iconproject, and published a detailed how-to. They conclude that scalable SVG icons satisfy some key needs, for responsive ads, logos, and application icons. With Responsive Logos, Harrison elegantly illustrates their application in branding.