It's a project to create SVG logos of popular services in under 1KB. Maximum filesize is 1,023 bytes.

New Contributors!

What started off as just me noodling around, has now attracted over 60 contributors! Some just drive-by and make a single change, others stay for a while and contribute loads. Which is nice.

New icons!

The project started with 80 icons. Since then we've grown to over 240!

Some are hip new apps like TikTok (447 Bytes)

Some are obscure programming logos like Cloujure (632 Bytes)

Some have nifty 3D depth effects like S3 (766 Bytes)

New Name!

It was originally Super Tiny Social Icons - but we've dropped the "The" "Social" to better reflect what it actually does.

New Smallerising Tricks!

I've learned so much from the contributors. This MineCraft (891 Bytes) one uses Base64 encoded PNGs and transforms really well.

This Raspberry Pi (1,010 Bytes) logo uses a similar mirroring trick.

Both Firefox (1,023 Bytes) and Instagram (768 Bytes) use gradients for great effect.

New Packages!

The icons are published as a Node Package so you can incorporate it in your fancy JavaScript projects.

Join In!

If you'd like to suggest a new logo, or build one yourself, or tidy something up - please get stuck in.

Sadly, the scan available is too low a resolution for most modern purposes. Wikipedia has vector logos of most of the coats of arms - but not this one.

In desperation, I emailed the College of Arms. They sent me back the most delightful LMGTFY I've ever received.

Thank you for your e-mail which Rouge Croix Pursuivant has received as Officer in Waiting for the week.

The Royal Arms you sent depict the Crown as used by Kings George V and VI. In 1953, The Queen chose to use St Edward’s Crown (which has a dip beneath the orb on the top, as opposed to having a semi-circular top).

Government Departments use the Royal Arms without the Crest (the lion on top of the crown). If you google “British government coat of arms” - images, you will see what various departments are using, either the open line drawing shown under “commons.wikimedia”(line one far right) or the more stylised black versions (as used by the FCO) which may reproduce better when photoreduced to a tiny size.

Nothing here is digitised, the College never having been publicly funded. If another Department cannot supply you with a high quality version, I can either send you a new drawing or scan in a previous one. In either case, I will have to charge for it – hence my advice on self-help above!

Using a reverse image search, I discovered a stock photo site had a copy.

Annoyingly, they've slapped a watermark over it and seem to be claiming copyright. Which is nonsense as the same image is freely available from The Internet Archive on Flickr! It's from the British Museum's Annual Report of 1925!

There are several version of this image available

With a little bit of editing, I turned it into a black-and-white version, which has cleaned up pretty well.

That's... OK. Not brilliant. Just fine. Even with better scans, there's a limit to what can be recovered from a 100 year old print.

I thought about trying to recreate it using the Wikipedia vector version as a template:

But there are some challenges:

• The "Honi soit qui mal y pense" is in lower case on the 1925 version.
• The lion's tail is significantly different.
• The crowns are a different style.
• The "Dieu et mon droit" are laid out differently.

So I think I'll just stick with my cleaned up version. If you think you can do better - or if you have a higher quality scan - please drop a note in the comments box.

I have an icon which, depending on the user's preference, can be inside a square or a circle. Is it possible for it to be centred in both?

Here's a visual example. On the left is the AirBnB logo centred in a square. When the background is turned into a circle, the logo appears to "drop" - the bottom of the logo is closer to the edge than the top of the logo.

So, let's change that and make the logo's extremities equidistant from the circumference of the circle:

Now, in the square version, it appears to be floating near the top.

Part of the problem is that I don't know what terms I need to search for. I am lacking in design vocabulary.

Is this a problem which can be solved? Can you help square this circle? Please let me know!

Take a look...

This is Google's default logo on its regular grey background.

The contrast ratio between the yellow and grey is 1.50. That fails to meet current accessibility guidelines.

This is just awful - I find it quite hard to read, especially for long passages. The text seems to shimmer about the background.

The logo is also often found on a pure white background with similarly poor results.

Against white, it is somewhat more readable - but it's nowhere near to a suitable contrast ratio

According to Google's own guidelines:

Text should maintain a minimum contrast ratio of at least 4.5:1 (calculated based on luminance values) for legibility. A ratio of 7:1 is preferred.

Material Design - Typography

Don't get me wrong, it could be a lot worse! But it really is unfortunate that their logo contains a central character which is so out of kilter with the background that it becomes a distraction.

The realization of the new identity required the collective work and diligence of hundreds of Googlers, in different roles, spanning the entire organization.

Evolving the Google Identity

Sadly, it would seem, none from the accessibility department.