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.
\nThe Basic Icon
\nYou can place Mana icons anywhere using the CSS classname prefix ms (for \"mana symbol\") and then the mana/card symbol's suffix.
\n <i class=\"ms ms-u\"></i>\n
\n
Creating a Casting Cost
\nAdd the .ms-cost class to create a casting cost circle around the symbol. Append the .ms-shadow class to add a drop shadow.
\n <i class=\"ms ms-g ms-cost\"></i>\n
\n <i class=\"ms ms-r ms-cost ms-shadow\"></i>\n
Split Casting Costs
\nNew: You no longer need the .ms-split class name, simply identifying a split or hybrid cost will now automatically handle the split styles.
\n <i class=\"ms ms-wu ms-cost\"></i>\n
\n <i class=\"ms ms-2b ms-cost ms-shadow\"></i>\n
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
\nEven 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:
\n <i class=\"ms ms-w ms-half ms-cost\"></i>\n
\n
Planeswalker Symbols
\nYou 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.
\n <i class=\"ms ms-loyalty-up ms-loyalty-3\"></i>\n
\n <i class=\"ms ms-loyalty-down ms-loyalty-2\"></i>\n
Saga Symbols
\nSaga 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.
\n <i class=\"ms ms-saga ms-saga-1\"></i>\n
\n <i class=\"ms ms-saga ms-saga-4\"></i>\n
Battle Symbols
\nBattle 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.
\n <i class=\"ms ms-defense ms-defense-1\"></i>\n
\n <i class=\"ms ms-defense ms-defense-outline ms-defense-3\"></i>
\n <i class=\"ms ms-defense ms-defense-print ms-defense-5\"></i>\n
Increase the Symbol's Size
\nTo 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.
\n <i class=\"ms ms-r ms-2x\"></i> ms-2x\n
\n <i class=\"ms ms-r ms-3x\"></i> ms-3x
\n <i class=\"ms ms-r ms-4x\"></i> ms-4x
\n <i class=\"ms ms-r ms-5x\"></i> ms-5x
\n <i class=\"ms ms-r ms-6x\"></i> ms-6x\n
Fixed Width
\nSome 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.
\n <i class=\"ms ms-planeswalker ms-fw\"></i> Planeswalker symbol\n
\n <i class=\"ms ms-land ms-fw\"></i> Land symbol\n
Dual-Layered Symbols
\nThe 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.
\n <i class=\"ms ms-multicolor\"></i> One layer\n
\n <i class=\"ms ms-multicolor ms-duo\"></i> Two layers
\n <i class=\"ms ms-multicolor ms-duo ms-duo-color ms-grad\"></i> Complete multicolor symbol\n <i class=\"ms ms-school-prismari ms-duo ms-duo-color\"></i> Prismari colored symbol\n
Arena Abilites and MODO Counters
\nMana 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.
\n <i class=\"ms ms-ability-flying\"></i> Evergreen ability\n
\n <i class=\"ms ms-ability-adventure ms-mechanic\"></i> Set-specific ability
\n <i class=\"ms ms-counter-plus\"></i> MODO counter\n
Card Color Indicators
\nSome 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.
\n\n <i class=\"ms ms-ci ms-ci-1 ms-ci-g\"></i> Green\n
\n <i class=\"ms ms-ci ms-ci-2 ms-ci-rg\"></i> Red/Green
\n <i class=\"ms ms-ci ms-ci-3 ms-ci-gur\"></i> Red/Green/Blue
\n
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.