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 two 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>

Saga Symbols

.ms-saga-1 .ms-saga-4

Saga symbols are supported natively up to V, even though only IV has ever been printed. The number that appears inside the hexagon is based on a class you add, like .ms-saga-2.

<i class="ms ms-saga ms-saga-1"></i>
<i class="ms ms-saga ms-saga-4"></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

Dual-Layered Symbols

One layer Two layers Two with color

The [multicolor symbol](https://mtg.gamepedia.com/Multicolored) has 2 layers and the only wayh to reliably achieve this is with 2 glyphs. Add .ms-duo and .ms-multicolor will add the background layer and knock out the foreground. If you add .ms-duo-color and optionally .ms-grad it will colorize it like the official symbol.

<i class="ms ms-multicolor"></i> One layer
<i class="ms ms-multicolor ms-duo"></i> Two layers
<i class="ms ms-multicolor ms-duo ms-duo-color ms-grad"></i> Complete multicolor symbol

Arena Abilites and MODO Counters

Evergreen ability Set-specific ability MODO counter

Mana has full Arena and Modo ability and counter coverage. You can apply the set-specific gold gradient that Arena uses on abilities with .ms-mechanic.

<i class="ms ms-ability-flying"></i> Evergreen ability
<i class="ms ms-ability-adventure ms-mechanic"></i> Set-specific ability
<i class="ms ms-counter-plus"></i> MODO counter