Magic: The Gathering's SVG mana costs for the web
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A simple CSS based on Goblin Hero's vecor mana symbols for Magic: The Gathering.

This is usefull for web applications.


Simply grab the SVG found in images/ and the CSS found in css/, then start using the .mana class.

Classes are named to reflect the mana costs of mtgjson, with only alphanumeric chars.

For example:


Can be translated in:

<span class="mana medium s1"></span>
<span class="mana medium swu"></span>
<span class="mana medium swu"></span>


This can not be considered as tested, I wrote this in a hour of free time and plan to use in a future project. Any comment, issue report or pull request will be appreciated!

I have not yet included large styles for not square icons.