Attributes and Examples

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.

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.

Split Casting Costs

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

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:

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.

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.

Battle Symbols

.ms-defense .ms-defense-outline .ms-defense-print

Battle cards have a unique defense box and values are supported from 0-20 using utility classes similar to Loyalty and Sagas, in the format .ms-defense-2.

There are 3 variations of the symbol that you can display. The simplest is just the black background with a white number (.ms-defense). An outline version has a black border with black number and white inside (.ms-defense-outline). Finally the full "print" version uses 3 layers and mimics the way the defense box is printed on cards; use this with .ms-defense-print.

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.

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.

Dual-Layered Symbols

One layer Two layers Two with color Prismari

The multicolor symbol has 2 layers and the only way 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.

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.

Card Color Indicators

Green Red/Green Red/Green/Blue

Some cards use color indicator circles on their alternate faces to indicate that the card is still a certain color identity. Mana supports all 31 variations, though only about 10 different color combinations exist on cards currently.

To display these, use class .ms-ci and then .ms-ci-X where "X" is the number of colors in the identity. Then add the corresponding color class, like .ms-ci-wug.

Importantly, the only SVGs used to display these are the borders, and there are 5 different border glyphs. The colors themselves are displayed using the background: conic-gradient(); CSS attribute, which you can view the support for on Can I Use. TL;DR: it has almost universal practical browser support.

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.