Mana | Andrew Gioia

Mana is a complete set of scalable vector icons for Magic mana (and other card) symbols. Drop them into your application, website, or custom cards (like this ) and control their size, color, drop shadow, or any dimension just as you would with text!

Using Mana

Each mana/card symbol has its own font character. Display them in a manner similar to Font Awesome using the <i class="ms ..."></i> element. There are class names for each mana color (w, u, b, r, g, c) and for the various symbols that appear on cards (like tap). See the full list of available symbols.

To use Mana, move the font files to your /fonts directory and include the mana.css stylesheet in your <head>:

<link href="css/mana.css" rel="stylesheet" type="text/css" />

New! You can also now use Mana via CDN thanks to the amazing jsDelivr project! You can include the latest version in your project (and note the name is "mana-font"):

<link href="//cdn.jsdelivr.net/npm/mana-font@latest/css/mana.css" rel="stylesheet" type="text/css" />

Insert set symbol icons by using the .ms class and then the mana/symbol code class(es), such as .ms-u for blue mana:

<i class="ms ms-u"></i>

Editing the Source

Feel free to edit the source files and compile Mana to fit your needs. All SVG glyphs are compiled into font files using the wonderful IcoMoon app. For styling, both LESS and Sass are included.

License

Please review the following licenses for each component of Mana:

All mana and card symbol images are copyright Wizards of the Coast (http://magicthegathering.com)
The Mana font is licensed under the the SIL OFL 1.1 (http://scripts.sil.org/OFL)
Mana CSS, LESS, and Sass files are licensed under the MIT License (http://opensource.org/licenses/mit-license.html)

Attribution is greatly appreciated but not required!