Mana & Card Icons


Complete set of Magic mana and card symbol font icons

Mana has some built in icon options to easily change the size and position, convert the mana symbols to the casting costs, and create planeswalker loyalty symbols with numbers. Take a look below at examples of each option with the class names to implement them.

The Basic Icon


You can place Mana icons anywhere using the CSS classname prefix ms (for "mana symbol") and then the mana/card symbol's suffix.

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

Creating a Casting Cost

.ms-cost + .ms-shadow

Add the .ms-cost class to create a casting cost circle around the symbol. Append the .ms-shadow class to add a drop shadow.

<i class="ms ms-g ms-cost"></i>
<i class="ms ms-r ms-cost ms-shadow"></i>

Split Casting Costs

.ms-split + .ms-shadow

Automatically create split casting costs using the .ms-split class along with the 2 symbols' codes. This works for color pairs and the "2" with a color.

<i class="ms ms-wu ms-split ms-cost"></i>
<i class="ms ms-2b ms-split ms-cost ms-shadow"></i>

Half Mana Casting Costs


Even though there's only been one of these ever printed you can still create them :P Half costs require a bit more markup:

<span class="ms-half">
    <i class="ms ms-w ms-cost"></i>

Planeswalker Symbols

.ms-loyalty-up .ms-loyalty-down

You can create planewalker loyalty symbols for the starting value, zero, and ticking up or down. The number that appears is based on a class you add, like .ms-loyalty-4.

<i class="ms ms-loyalty-up ms-loyalty-3"></i>
<i class="ms ms-loyalty-down ms-loyalty-2"></i>

Increase the Symbol's Size

.ms-2x .ms-3x .ms-4x .ms-5x .ms-6x

To conveniently increase the size of a mana or card symbol you can append the classes ms-2x, ms-3x, ms-4x, ms-4x, and ms-6x. These classes increase the size by a factor equal to class name number.

<i class="ms ms-r ms-2x"></i> ms-2x
<i class="ms ms-r ms-3x"></i> ms-3x
<i class="ms ms-r ms-4x"></i> ms-4x
<i class="ms ms-r ms-5x"></i> ms-5x
<i class="ms ms-r ms-6x"></i> ms-6x

Fixed Width

Planeswalker Land

Some of the card symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width to a standard size, just append the class .ms-fw and the symbols will have a constant width and centered icon.

<i class="ms ms-planeswalker ms-fw"></i> Planeswalker symbol
<i class="ms ms-land ms-fw"></i> Land symbol