Classic Badge Designer


Add text and icons to your badge using a range of fonts and type styles

Add banners to your badge and even add curved text on top

Combine a wide range of graphics and images to create your designs

Preview your badge design in realtime, as you build it

Adjust the colour, opacity and position of all of your badge design elements

Re-order your layers to bring things forward or send things back


How does the badge design work?

How does it work?

The Classic Badge Designer makes use of some exciting HTML5 features that allow you to combine lots of different visual elements, colours and text to create awesome and intersting badge graphics. You can then download these as PNG images to use in your Open Badge issuing systems.

Read the user guide


Plug the Classic Designer into your Wordpress site

Plug into Wordpress

Building an awesome looking badge is just part of the Open Badges and badge issuing workflow. The Classic Designer Wordpress plugin lets you leverage the power of the as part of a wider, and more complete badge issuing platform based on the open source Wordpress platform.

Download the plugin


Integrate the Classic Designer into your own software, tools and workflows

Integrate the designer

Want to use as part of your own badging workflow? We've built the Classic Badge Designer so that it can plug easily into other software applications. The designer can be launched seamlessly, allowing for rich graphics to be created, and then published back to your code as a Base64 PNG or JSON string.

API documentation

How does the badge design work?

Tell us what you think

We love the potential of the Mozilla Open Badges initiative and want to be a part of what's going on, that's the reason we built the badge designer in the first place. We're excited to see it grow and develop as the Open Badges movement continues to take hold and your feedback and thoughts can help us do this in the best way possible.

If you've got an idea, an image suggestion, an integration opportunity or anything else you'd like to contribute then you can let us know on our feedback page or by dropping an email to


How does the badge design work?

About MyKnowledgeMap

This Open Badge designer is brought to you by MyKnowledgeMap - an assessment & learning technology company with a drive to support open initiatives and open standards. We're really excited about Mozilla Open Badges and how they can support recording learner achievement and the creation of lifelong portfolios and hope that you'll join us for the ride.

If you'd like to know more about what we're doing, how we're implementing Open Badges within our other live systems and products right now, or how our Open Badges platform can support you then we'd love to hear from you.

Need more?

Some examples of badges built with the NEW Enhanced Badge Designer

With more features, more icons and an awesomly huge library of graphics, our new Enhanced Badge Designer is a great way to do more with Open Badges. You can even use to define and issue your badges directly to your students and badge recipients!

Find out more