Custom badge image guidelines

Support
1

I’m about to ask our design team to create some custom badge images for us.

Before I do that, it would be useful to know what guidelines those images should follow :sweat_smile:

Obvs square. Anything else? Image format? Resolution? …?

1 Like
3

Good question!

The badges are usually rendered at ~ 14x14, 16x16, or 56x56px.
The size can vary because it’s usually relative to the element font size.
But it gives you an idea of the baseline size you can aim for.

Also:

  • 1:1 ratio
  • SVG for scaling with a smaller image or PNG transparent with a larger image; it depends on what you want to show.
  • Keep in mind the dark mode for the color
  • Keep in mind the badge type if needed
  • Keep in mind how it will be displayed at a small size

That’s all I can think of for now.

You could also consider creating a custom SVG icon If I’m correct. This way, it will scale nicely with the proper color (also easier to change later).

I hope that helps.

5 Likes