<h2class="sub">Complete set of Magic mana and card symbol font icons</h2>
</div>
</header>
<main>
<divclass="wrapper">
<section>
<h3><strong>Mana</strong> has some built in icon options to easily change the <strong>size and position</strong>, convert the mana symbols to the <strong>casting costs</strong>, and create planeswalker <strong>loyalty symbols</strong> with numbers. Take a look below at examples of each option with the class names to implement them.</h3>
</section>
<sectionclass="content">
<h4>The Basic Icon</h4>
<divclass="example float-left">
<spanclass="each">
<iclass="ms ms-u"></i> .ms-u
</span>
</div>
<divclass="explanation">
<p>You can place Mana icons anywhere using the CSS classname prefix <code>ms</code> (for "mana symbol") and then the mana/card symbol's <ahref="icons.html">suffix</a>.</p>
<p>Add the <code>.ms-cost</code> class to create a casting cost circle around the symbol. Append the <code>.ms-shadow</code> class to add a drop shadow.</p>
<p><strong>New:</strong> You no longer need the <code>.ms-split</code> class name, simply identifying a split or hybrid cost will now automatically handle the split styles.</p>
<p>For backwards compatibility and full control you can still use create split and hybrid casting costs separately with the <code>.ms-split</code> class along with the 2-symbols' codes. This works for color pairs and the "2" with a color.</p>
<p>Even though there's only been <ahref="http://magiccards.info/uh/en/16.html"><strike>one</strike></a><ahref="https://scryfall.com/card/unh/82/monss-goblin-waiters">two</a> of these ever printed you can still create them :P Half costs <ahref="https://github.com/andrewgioia/Mana/issues/6">used to require a wrapping element</a> but as of v1.4.1 they are a regular single element:</p>
<p>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 <code>.ms-loyalty-4</code>. Currently numbers 0-20 are supported for start, up, and down.</p>
<p>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 <code>.ms-saga-2</code>.</p>
<p>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 <code>.ms-defense-2</code>.</p>
<p>There are 3 variations of the symbol that you can display. The simplest is just the black background with a white number (<code>.ms-defense</code>). An outline version has a black border with black number and white inside (<code>.ms-defense-outline</code>). Finally the full "print" version uses 3 layers and mimics the way the defense box is printed on cards; use this with <code>.ms-defense-print</code>.</p>
<p>To conveniently increase the size of a mana or card symbol you can append the classes <code>ms-2x</code>, <code>ms-3x</code>, <code>ms-4x</code>, <code>ms-4x</code>, and <code>ms-6x</code>. These classes increase the size by a factor equal to class name number.</p>
<p>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 <code>.ms-fw</code> and the symbols will have a constant width and centered icon.</p>
<p>The <ahref="https://mtg.gamepedia.com/Multicolored">multicolor symbol</a> has 2 layers and the only way to reliably achieve this is with 2 glyphs. Add <code>.ms-duo</code> and <code>.ms-multicolor</code> will add the background layer and knock out the foreground. If you add <code>.ms-duo-color</code> and optionally <code>.ms-grad</code> it will colorize it like the official symbol.</p>
<<spanclass="e">i</span><spanclass="a">class</span>=<spanclass="v">"ms ms-multicolor"</span>></<spanclass="e">i</span>> One layer<br/>
<<spanclass="e">i</span><spanclass="a">class</span>=<spanclass="v">"ms ms-multicolor ms-duo"</span>></<spanclass="e">i</span>> Two layers<br/>
<<spanclass="e">i</span><spanclass="a">class</span>=<spanclass="v">"ms ms-multicolor ms-duo ms-duo-color ms-grad"</span>></<spanclass="e">i</span>> Complete multicolor symbol
<spanclass="each"><iclass="ms ms-2x ms-counter-plus"></i> MODO counter</span>
</div>
<divclass="explanation">
<p>Mana has full Arena and Modo ability and counter coverage. You can apply the set-specific gold gradient that Arena uses on abilities with <code>.ms-mechanic</code>.</p>
<p>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.</p>
<p>To display these, use class <code>.ms-ci</code> and then <code>.ms-ci-X</code> where "X" is the number of colors in the identity. Then add the corresponding color class, like <code>.ms-ci-wug</code>.</p>
<p>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 <code>background: conic-gradient();</code> CSS attribute, which you can view the support for on <ahref="https://caniuse.com/css-conic-gradients"target="blank">Can I Use</a>. TL;DR: it has almost universal practical browser support.</p>
