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>
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.
<i class="ms ms-defense ms-defense-1"></i>
<i class="ms ms-defense ms-defense-outline ms-defense-3"></i>
<i class="ms ms-defense ms-defense-print ms-defense-5"></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.

ms-u 
ms-b 
ms-r 
ms-g 
ms-w-original 
ms-w-list 
ms-c 
ms-0 
ms-1 
ms-2 
ms-3 
ms-4 
ms-5 
ms-6 
ms-7 
ms-8 
ms-9 
ms-10 
ms-11 
ms-12 
ms-13 
ms-14 
ms-15 
ms-16 
ms-17 
ms-18 
ms-19 
ms-20 
ms-x 
ms-y 
ms-z 
ms-d 
ms-e 
ms-h 
ms-l 
ms-paw 
ms-s 
ms-s-mtga 

ms-acorn 
ms-artist-brush 
ms-artist-nib 
ms-chaos 
ms-defense 
ms-defense-outline 
ms-infinity 
ms-level 
ms-level-border 
ms-loyalty-up 
ms-loyalty-down 
ms-loyalty-zero 
ms-loyalty-start 
ms-multicolor 
ms-power 
ms-power-mtga 
ms-saga 
ms-spree 
ms-tap 
ms-tap-3ed 
ms-tap-4ed 
ms-ticket 
ms-toughness 
ms-toughness-mtga 
ms-untap 
ms-ci-1 
ms-ci-2 
ms-ci-3 
ms-ci-4 
ms-ci-5 

ms-1000000 

ms-battle 
ms-battle-siege 
ms-commander 
ms-conspiracy 
ms-creature 
ms-enchantment 
ms-flashback 
ms-instant 
ms-land 
ms-multiple 
ms-phenomenon 
ms-plane 
ms-planeswalker 
ms-rarity 
ms-scheme 
ms-sorcery 
ms-token 
ms-tribal 
ms-vanguard 

ms-dfc-day 
ms-dfc-spark 
ms-dfc-ignite 
ms-dfc-moon 
ms-dfc-emrakul 
ms-dfc-enchantment 
ms-dfc-land 
ms-dfc-lesson 
ms-dfc-front 
ms-dfc-back 
ms-dfc-meld 
ms-dfc-facedown 
ms-dfc-modal-face 
ms-dfc-modal-back 

ms-guild-boros 
ms-guild-dimir 
ms-guild-golgari 
ms-guild-gruul 
ms-guild-izzet 
ms-guild-orzhov 
ms-guild-rakdos 
ms-guild-selesnya 
ms-guild-simic 
ms-clan-abzan 
ms-clan-jeskai 
ms-clan-mardu 
ms-clan-sultai 
ms-clan-temur 
ms-clan-atarka 
ms-clan-dromoka 
ms-clan-ojutai 
ms-clan-kolaghan 
ms-clan-silumgar 
ms-party-cleric 
ms-party-rogue 
ms-party-warrior 
ms-party-wizard 
ms-polis-setessa 
ms-polis-akros 
ms-polis-meletis 
ms-school-lorehold 
ms-school-prismari 
ms-school-quandrix 
ms-school-silverquill 
ms-school-witherbloom 
ms-school-brokers 
ms-school-cabaretti 
ms-school-maestros 
ms-school-obscura 
ms-school-riveteers 

ms-ability-adamant 
ms-ability-adapt 
ms-ability-addendum 
ms-ability-adventure 
ms-ability-afflict 
ms-ability-afterlife 
ms-ability-aftermath 
ms-ability-alliance 
ms-ability-amass 
ms-ability-amass-orcs 
ms-ability-ascend 
ms-ability-backup 
ms-ability-bargain 
ms-ability-blitz 
ms-ability-boast 
ms-ability-case-solved 
ms-ability-case-solved-print 
ms-ability-casualty 
ms-ability-celebration 
ms-ability-changeling 
ms-ability-channel 
ms-ability-cleave 
ms-ability-cloak 
ms-ability-collect-evidence 
ms-ability-companion 
ms-ability-constellation 
ms-ability-convoke 
ms-ability-convoke-original 
ms-ability-corrupted 
ms-ability-coven 
ms-ability-craft 
ms-ability-crime 
ms-ability-d20 
ms-ability-day-night 
ms-ability-daybound-nightbound 
ms-ability-deathtouch 
ms-ability-decayed 
ms-ability-defender 
ms-ability-delve 
ms-ability-descend 
ms-ability-devotion 
ms-ability-discover 
ms-ability-disguise 
ms-ability-disturb 
ms-ability-domain 
ms-ability-double-strike 
ms-ability-dungeon 
ms-ability-eerie 
ms-ability-embalm 
ms-ability-enlist 
ms-ability-enrage 
ms-ability-enrage-original 
ms-ability-escape 
ms-ability-eternalize 
ms-ability-exalted 
ms-ability-expend 
ms-ability-exploit 
ms-ability-explore 
ms-ability-ferocious 
ms-ability-first-strike 
ms-ability-flash 
ms-ability-flying 
ms-ability-for-mirrodin 
ms-ability-forage 
ms-ability-foretell 
ms-ability-gift 
ms-ability-goad 
ms-ability-haktos-the-unscarred 
ms-ability-haste 
ms-ability-hexproof 
ms-ability-hexproof-black 
ms-ability-hexproof-blue 
ms-ability-hexproof-green 
ms-ability-hexproof-red 
ms-ability-hexproof-white 
ms-ability-hideaway 
ms-ability-impending 
ms-ability-improvise 
ms-ability-incubate 
ms-ability-indestructible 
ms-ability-investigate 
ms-ability-jumpstart 
ms-ability-kicker 
ms-ability-landfall 
ms-ability-learn 
ms-ability-lifelink 
ms-ability-lifelink-original 
ms-ability-magecraft 
ms-ability-manifest-dread 
ms-ability-meld 
ms-ability-menace 
ms-ability-mentor 
ms-ability-morph 
ms-ability-mutate 
ms-ability-ninjutsu 
ms-ability-obscura 
ms-ability-offspring 
ms-ability-outlast 
ms-ability-party 
ms-ability-phyrexian 
ms-ability-plot 
ms-ability-proliferate 
ms-ability-prototype 
ms-ability-prowess 
ms-ability-raid 
ms-ability-reach 
ms-ability-read-ahead 
ms-ability-reconfigure 
ms-ability-revolt 
ms-ability-ring-bearer 
ms-ability-riot 
ms-ability-robber-of-the-rich 
ms-ability-role-cursed 
ms-ability-role-monster 
ms-ability-role-royal 
ms-ability-role-sorceror 
ms-ability-role-wicked 
ms-ability-role-young-hero 
ms-ability-saddle 
ms-ability-specialize 
ms-ability-spectacle 
ms-ability-spree 
ms-ability-static 
ms-ability-summoning-sickness 
ms-ability-survival 
ms-ability-surveil 
ms-ability-surveil-original 
ms-ability-suspect 
ms-ability-the-ring-tempts-you 
ms-ability-toxic 
ms-ability-training 
ms-ability-trample 
ms-ability-transform 
ms-ability-triggered 
ms-ability-unearth 
ms-ability-undergrowth 
ms-ability-valiant 
ms-ability-vigilance 
ms-ability-ward 

ms-ability-duels-battle-cry 
ms-ability-duels-unblockable 
ms-ability-duels-cannot-block 
ms-ability-duels-cannot-untap 
ms-ability-duels-cohort 
ms-ability-duels-copy 
ms-ability-duels-deathtouch 
ms-ability-duels-defender 
ms-ability-duels-delirium 
ms-ability-duels-detain 
ms-ability-duels-double-strike 
ms-ability-duels-dfc 
ms-ability-duels-evolve 
ms-ability-duels-exalted 
ms-ability-duels-exile 
ms-ability-duels-fading 
ms-ability-duels-fear 
ms-ability-duels-first-strike 
ms-ability-duels-flying 
ms-ability-duels-forestwalk 
ms-ability-duels-haste 
ms-ability-duels-haunt 
ms-ability-duels-hexproof 
ms-ability-duels-indestructible 
ms-ability-duels-infect 
ms-ability-duels-ingest 
ms-ability-duels-intimidate 
ms-ability-duels-islandwalk 
ms-ability-duels-legendary 
ms-ability-duels-lifelink 
ms-ability-duels-menace 
ms-ability-duels-monstrous 
ms-ability-duels-mountainwalk 
ms-ability-duels-must-attack 
ms-ability-duels-plainswalk 
ms-ability-duels-prevent-damage 
ms-ability-duels-protection-black 
ms-ability-duels-protection-blue 
ms-ability-duels-protection-green 
ms-ability-duels-protection-red 
ms-ability-duels-protection-white 
ms-ability-duels-protection 
ms-ability-duels-rally 
ms-ability-duels-regenerate 
ms-ability-duels-renowned 
ms-ability-duels-shroud 
ms-ability-duels-skulk 
ms-ability-duels-soulshift 
ms-ability-duels-swampwalk 
ms-ability-duels-temporary-control 
ms-ability-duels-totem-armor 
ms-ability-duels-trample 
ms-ability-duels-undying 
ms-ability-duels-vigilance 

ms-counter-brick 
ms-counter-brick-print 
ms-counter-charge 
ms-counter-charge-print 
ms-counter-damage 
ms-counter-deathtouch 
ms-counter-devotion 
ms-counter-doom 
ms-counter-echo 
ms-counter-finality 
ms-counter-flame 
ms-counter-flood 
ms-counter-fungus 
ms-counter-gold 
ms-counter-ki 
ms-counter-lore 
ms-counter-loyalty 
ms-counter-mining 
ms-counter-minus 
ms-counter-minus-uneven 
ms-counter-muster 
ms-counter-paw 
ms-counter-pin 
ms-counter-plus 
ms-counter-plus-uneven 
ms-counter-rad 
ms-counter-scream 
ms-counter-shield 
ms-counter-skeleton 
ms-counter-skull 
ms-counter-stun 
ms-counter-slime 
ms-counter-time 
ms-counter-verse 
ms-counter-void 
ms-counter-vortex 

ms-watermark-arena 
ms-watermark-colorpie 
ms-watermark-conspiracy 
ms-watermark-corocoro 
ms-watermark-crossbreedlabs 
ms-watermark-cutiemark-apples 
ms-watermark-cutiemark-balloons 
ms-watermark-cutiemark-butterflies 
ms-watermark-cutiemark-gems 
ms-watermark-cutiemark-rainbow 
ms-watermark-cutiemark-sparkle 
ms-watermark-cutiemark-waningmoon 
ms-watermark-cutiemark-waxingmoon 
ms-watermark-dci 
ms-watermark-dengekimaoh 
ms-watermark-desparked 
ms-watermark-dnd 
ms-watermark-flavor-aestheticconsultation 
ms-watermark-flavor-farewelltoarms 
ms-watermark-flavor-manascrew 
ms-watermark-flavor-monkeymonkeymonkey 
ms-watermark-flavor-moxlotus 
ms-watermark-flavor-myfirsttome 
ms-watermark-flavor-shoetree 
ms-watermark-flavor-whenfluffybunniesattack 
ms-watermark-fnm 
ms-watermark-goblinexplosioneers 
ms-watermark-grandprix 
ms-watermark-grandprix2 
ms-watermark-herospath 
ms-watermark-herospath-1 
ms-watermark-herospath-2 
ms-watermark-herospath-3 
ms-watermark-herospath-4 
ms-watermark-herospath-5 
ms-watermark-herospath-6 
ms-watermark-herospath-7 
ms-watermark-herospath-8 
ms-watermark-herospath-9 
ms-watermark-japanjunior 
ms-watermark-judgeacademy 
ms-watermark-junior 
ms-watermark-juniorapac 
ms-watermark-junioreurope 
ms-watermark-leagueofdastardlydoom 
ms-watermark-mirran 
ms-watermark-mps 
ms-watermark-mtg 
ms-watermark-mtg10 
ms-watermark-mtg15 
ms-watermark-nerf 
ms-watermark-orderofthewidget 
ms-watermark-protour 
ms-watermark-scholarship 
ms-watermark-transformers 
ms-watermark-trumpkatsumai 
ms-watermark-wotc 
ms-watermark-wpn 