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>
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>
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.
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>
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 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>
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
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
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.
<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 <i class="ms ms-school-prismari ms-duo ms-duo-color"></i> Prismari colored symbol
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
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.
<i class="ms ms-ci ms-ci-1 ms-ci-g"></i> Green
<i class="ms ms-ci ms-ci-2 ms-ci-rg"></i> Red/Green
<i class="ms ms-ci ms-ci-3 ms-ci-gur"></i> Red/Green/Blue
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.