Mana & Card Icons

Download

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

.ms-u

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-wu + .ms-shadow

New: You no longer need the .ms-split class name, simply identifying a split or hybrid cost will now automatically handle the split styles.

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

For backwards compatibility and full control you can still use create split and hybrid casting costs separately with the .ms-split class along with the 2-symbols' codes. This works for color pairs and the "2" with a color.

Half Mana Casting Costs

.ms-half

Even though there's only been one of these ever printed you can still create them :P Half costs used to require a wrapping element but as of v1.4.1 they are a regular single element:

<i class="ms ms-w ms-half 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. Currently numbers 0-20 are supported for start, up, and down.

<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