mana/index.html

630 lines
37 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana</title>
<link rel="stylesheet" href="css/mana.css?v=1.8.0" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
html {
border-top: 5px solid #CBC8BB;
}
body {
background: #fff;
color: #333;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 17px;
line-height: 1.6em;
margin: 0 auto;
padding: 0 100px;
max-width: 1280px;
}
h1, h2, .mplantin {
font-family: MPlantin, Times, serif;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 19px;
font-weight: bold;
margin: 16px 0 0;
}
p {
margin: 12px 0 20px;
}
.grid {
display:flex;
flex-wrap:wrap;
gap: 0.5rem;
align-items: center;
}
footer {
border-top: 1px solid #eee;
margin: 40px 0 0;
padding: 20px 0 30px;
}
.pt {
font-size: 19px;
display: inline-block;
position: relative;
}
.left {
width: 46%;
float: left;
margin-bottom: 2rem;
}
.right {
width: 46%;
float: right;
margin-bottom: 2rem;
}
@media screen and (max-width: 1280px) {
.left, .right {
float: none;
width: 100%;
}
.sm-screen {
display: inline-block;
padding-right: 10px;
}
}
</style>
</head>
<body>
<h1>Mana</h1>
<h2>MTG Mana Symbol Demos</h2>
<p>
This HTML file is for demo purposes and is not necessary for Mana installation or use.
You can view all of the mana symbol font icons and the available examples below
(casting cost background and increased sizes). Please take a look at the
<a href="https://mana.andrewgioia.com">Mana documentation page</a> for
the full set of icons, attributes, and usages.
</p>
<div class="left">
<h3>Regular mana symbols</h3>
<p>
<div class="sm-screen">
<i class="ms ms-w ms-cost ms-shadow"></i>
<i class="ms ms-u ms-cost ms-shadow"></i>
<i class="ms ms-b ms-cost ms-shadow"></i>
<i class="ms ms-r ms-cost ms-shadow"></i>
<i class="ms ms-g ms-cost ms-shadow"></i>
&nbsp;&nbsp;
<i class="ms ms-w ms-w-original ms-cost ms-shadow"></i>
<i class="ms ms-w ms-w-list ms-cost ms-shadow"></i>
</div>
<div class="sm-screen">
<i class="ms ms-0 ms-cost ms-shadow"></i>
<i class="ms ms-1 ms-cost ms-shadow"></i>
<i class="ms ms-2 ms-cost ms-shadow"></i>
<i class="ms ms-3 ms-cost ms-shadow"></i>
<i class="ms ms-4 ms-cost ms-shadow"></i>
<i class="ms ms-5 ms-cost ms-shadow"></i>
<i class="ms ms-6 ms-cost ms-shadow"></i>
<i class="ms ms-7 ms-cost ms-shadow"></i>
<i class="ms ms-8 ms-cost ms-shadow"></i>
<i class="ms ms-9 ms-cost ms-shadow"></i>
<i class="ms ms-10 ms-cost ms-shadow"></i>
<i class="ms ms-11 ms-cost ms-shadow"></i>
<i class="ms ms-12 ms-cost ms-shadow"></i>
<i class="ms ms-13 ms-cost ms-shadow"></i>
<i class="ms ms-14 ms-cost ms-shadow"></i>
<i class="ms ms-15 ms-cost ms-shadow"></i>
<i class="ms ms-16 ms-cost ms-shadow"></i>
<i class="ms ms-17 ms-cost ms-shadow"></i>
<i class="ms ms-18 ms-cost ms-shadow"></i>
<i class="ms ms-19 ms-cost ms-shadow"></i>
<i class="ms ms-20 ms-cost ms-shadow"></i>
</div>
<div class="sm-screen">
<i class="ms ms-x ms-cost ms-shadow"></i>
<i class="ms ms-y ms-cost ms-shadow"></i>
<i class="ms ms-z ms-cost ms-shadow"></i>
</div>
</p>
<h3>Phyrexian, snow, colorless, energy, and split symbols</h3>
<p>
<i class="ms ms-wp ms-cost ms-shadow"></i>
<i class="ms ms-up ms-cost ms-shadow"></i>
<i class="ms ms-bp ms-cost ms-shadow"></i>
<i class="ms ms-rp ms-cost ms-shadow"></i>
<i class="ms ms-gp ms-cost ms-shadow"></i>
<i class="ms ms-s ms-cost ms-shadow"></i>
<i class="ms ms-s-mtga ms-cost ms-shadow"></i>
<i class="ms ms-c ms-cost ms-shadow"></i>
<i class="ms ms-e"></i>
<br />
<i class="ms ms-wu ms-cost ms-shadow"></i>
<i class="ms ms-wb ms-cost ms-shadow"></i>
<i class="ms ms-ub ms-cost ms-shadow"></i>
<i class="ms ms-ur ms-cost ms-shadow"></i>
<i class="ms ms-br ms-cost ms-shadow"></i>
<i class="ms ms-bg ms-cost ms-shadow"></i>
<i class="ms ms-rw ms-cost ms-shadow"></i>
<i class="ms ms-rg ms-cost ms-shadow"></i>
<i class="ms ms-gw ms-cost ms-shadow"></i>
<i class="ms ms-gu ms-cost ms-shadow"></i>
<i class="ms ms-2w ms-cost ms-shadow"></i>
<i class="ms ms-2u ms-cost ms-shadow"></i>
<i class="ms ms-2b ms-cost ms-shadow"></i>
<i class="ms ms-2r ms-cost ms-shadow"></i>
<i class="ms ms-2g ms-cost ms-shadow"></i>
<br />
<i class="ms ms-wup ms-cost ms-shadow"></i>
<i class="ms ms-wbp ms-cost ms-shadow"></i>
<i class="ms ms-ubp ms-cost ms-shadow"></i>
<i class="ms ms-urp ms-cost ms-shadow"></i>
<i class="ms ms-brp ms-cost ms-shadow"></i>
<i class="ms ms-bgp ms-cost ms-shadow"></i>
<i class="ms ms-rwp ms-cost ms-shadow"></i>
<i class="ms ms-rgp ms-cost ms-shadow"></i>
<i class="ms ms-gwp ms-cost ms-shadow"></i>
<i class="ms ms-gup ms-cost ms-shadow"></i>
</p>
<h3>Tap and roll symbols</h3>
<p>
<i class="ms ms-tap ms-cost ms-shadow"></i>
<i class="ms ms-untap ms-cost"></i>
<i class="ms ms-tap-alt ms-cost ms-shadow"></i>
<i class="ms ms-chaos"></i>
</p>
<h3>2x size (3-6x also included)</h3>
<p>
<i class="ms ms-w ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-u ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-b ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-r ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-g ms-cost ms-shadow ms-2x"></i>
</p>
<h3>Half mana symbols <small>[<a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Source</a>]</small></h3>
<p>
<i class="ms ms-w ms-half ms-cost"></i>
<i class="ms ms-u ms-half ms-cost"></i>
<i class="ms ms-b ms-half ms-cost"></i>
<i class="ms ms-r ms-half ms-cost"></i>
<i class="ms ms-g ms-half ms-cost"></i>
</p>
<h3>Portal power and toughness symbols</h3>
<p>
<span class="mplantin pt">4</span>
<i class="ms ms-power" style="font-size: 1.05em; margin: -8px 0 0 -3px;"></i>
<span class="mplantin pt" style="margin-left: -3px;">/</span>
<span class="mplantin pt" style="margin-left: -2px;">5</span>
<i class="ms ms-toughness" style="font-size: 1.05em; margin: -9px 0 0 -3px;"></i>
</p>
<h3>Un-set mana symbols</h3>
<p>
<i class="ms ms-1-2 ms-cost ms-shadow"></i>
<i class="ms ms-infinity ms-cost ms-shadow"></i>
<i class="ms ms-100 ms-cost ms-shadow"></i>
<i class="ms ms-1000000 ms-cost ms-shadow"></i>
<i class="ms ms-acorn"></i>
<i class="ms ms-ticket"></i>
</p>
<h3>Color indicators</h3>
<p>
<i class="ms ms-ci ms-ci-1 ms-ci-w"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-u"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-b"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-r"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-g"></i>
&nbsp;
<i class="ms ms-ci ms-ci-2 ms-ci-wu"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-wb"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-ub"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-ur"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-bg"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-br"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-rw"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-rg"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-gu"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-gw"></i>
<br />
<i class="ms ms-ci ms-ci-3 ms-ci-wug"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-ubw"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-bru"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-rgb"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-gwr"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-wbg"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-urw"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-bgu"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-rwb"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-gur"></i>
&nbsp;
<i class="ms ms-ci ms-ci-4 ms-ci-ubrg"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-brgw"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-rgwu"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-gwub"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-wubr"></i>
&nbsp;
<i class="ms ms-ci ms-ci-5"></i>
</p>
<h3>Loyalty symbols</h3>
<div class="grid">
<i class="ms ms-loyalty-up ms-loyalty-3 ms-3x"></i>
<i class="ms ms-loyalty-down ms-loyalty-x ms-3x"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-3x"></i>
<i class="ms ms-loyalty-start ms-loyalty-4 ms-4x"></i>
<i class="ms ms-loyalty-up ms-loyalty-2 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-down ms-loyalty-1 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-start ms-loyalty-5 ms-loyalty-outline"></i>
</div>
<div class="grid">
<i class="ms ms-saga ms-saga-1 ms-2x"></i>
<i class="ms ms-saga ms-saga-2 ms-2x"></i>
<i class="ms ms-saga ms-saga-3 ms-2x"></i>
<i class="ms ms-saga ms-saga-4 ms-2x"></i>
<i class="ms ms-saga ms-saga-5 ms-2x"></i>
<i class="ms ms-saga ms-saga-6 ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-level ms-3x"><span>1-2</span></i>
&nbsp;&nbsp;
<i class="ms ms-defense ms-defense-0 ms-3x"></i>
<i class="ms ms-defense ms-defense-4 ms-3x"></i>
<i class="ms ms-defense ms-defense-outline ms-defense-5 ms-2x"></i>
<i class="ms ms-defense ms-defense-print ms-defense-4 ms-3x"></i>
</div>
<h3>Card Watermarks</h3>
<p class="grid">
<i class="ms ms-watermark-abzan ms-2x ms-fw" title="Abzan"></i>
<i class="ms ms-watermark-agentsofsneak ms-2x ms-fw" title="Agents of S.N.E.A.K."></i>
<i class="ms ms-watermark-arena ms-2x ms-fw" title="Arena League"></i>
<i class="ms ms-watermark-atarka ms-2x ms-fw" title="Atarka"></i>
<i class="ms ms-watermark-azorius ms-2x ms-fw" title="Azorius"></i>
<i class="ms ms-watermark-boros ms-2x ms-fw" title="Boros"></i>
<i class="ms ms-watermark-brokers ms-2x ms-fw" title="Brokers"></i>
<i class="ms ms-watermark-cabaretti ms-2x ms-fw" title="Cabaretti"></i>
<i class="ms ms-watermark-colorpie ms-2x ms-fw" title="Color pie"></i>
<i class="ms ms-watermark-conspiracy ms-2x ms-fw" title="Conspiracy"></i>
<i class="ms ms-watermark-corocoro ms-2x ms-fw" title="Coro Coro"></i>
<i class="ms ms-watermark-crossbreedlabs ms-2x ms-fw" title="Crossbreed Labs"></i>
<i class="ms ms-watermark-dnd ms-2x ms-fw" title="D&D"></i>
<i class="ms ms-watermark-dci ms-2x ms-fw" title="DCI"></i>
<i class="ms ms-watermark-dengekimaoh ms-2x ms-fw" title="Dengeki-Maoh"></i>
<i class="ms ms-watermark-desparked ms-2x ms-fw" title="Desparked"></i>
<i class="ms ms-watermark-dimir ms-2x ms-fw" title="Dimir"></i>
<i class="ms ms-watermark-dromoka ms-2x ms-fw" title="Dromoka"></i>
<i class="ms ms-watermark-flavor-aestheticconsultation ms-2x ms-fw" title="Flavor (Aesthetic Consultation)"></i>
<i class="ms ms-watermark-flavor-farewelltoarms ms-2x ms-fw" title="Flavor (Farewell to Arms)"></i>
<i class="ms ms-watermark-flavor-monkeymonkeymonkey ms-2x ms-fw" title="Flavor (Monkey Monkey Monkey)"></i>
<i class="ms ms-watermark-flavor-moxlotus ms-2x ms-fw" title="Flavor (Mox Lotus)"></i>
<i class="ms ms-watermark-flavor-myfirsttome ms-2x ms-fw" title="Flavor (My First Tome)"></i>
<i class="ms ms-watermark-flavor-shoetree ms-2x ms-fw" title="Flavor (Shoe Tree)"></i>
<i class="ms ms-watermark-flavor-whenfluffybunniesattack ms-2x ms-fw" title="Flavor (When Fluffy Bunnies Attack)"></i>
<i class="ms ms-watermark-fnm ms-2x ms-fw" title="FNM"></i>
<i class="ms ms-watermark-foretell ms-2x ms-fw" title="Foretell"></i>
<i class="ms ms-watermark-goblinexplosioneers ms-2x ms-fw" title="Goblin Explosioneers"></i>
<i class="ms ms-watermark-golgari ms-2x ms-fw" title="Golgari"></i>
<i class="ms ms-watermark-grandprix ms-2x ms-fw" title="Grand Prix"></i>
<i class="ms ms-watermark-grandprix2 ms-2x ms-fw" title="Grand Prix (New)"></i>
<i class="ms ms-watermark-gruul ms-2x ms-fw" title="Gruul"></i>
<i class="ms ms-watermark-herospath ms-2x ms-fw" title="Hero's Path"></i>
<i class="ms ms-watermark-herospath-1 ms-2x ms-fw" title="Hero's Path: 1"></i>
<i class="ms ms-watermark-herospath-2 ms-2x ms-fw" title="Hero's Path: 2"></i>
<i class="ms ms-watermark-herospath-3 ms-2x ms-fw" title="Hero's Path: 3"></i>
<i class="ms ms-watermark-herospath-4 ms-2x ms-fw" title="Hero's Path: 4"></i>
<i class="ms ms-watermark-herospath-5 ms-2x ms-fw" title="Hero's Path: 5"></i>
<i class="ms ms-watermark-herospath-6 ms-2x ms-fw" title="Hero's Path: 6"></i>
<i class="ms ms-watermark-herospath-7 ms-2x ms-fw" title="Hero's Path: 7"></i>
<i class="ms ms-watermark-herospath-8 ms-2x ms-fw" title="Hero's Path: 8"></i>
<i class="ms ms-watermark-herospath-9 ms-2x ms-fw" title="Hero's Path: 9"></i>
<i class="ms ms-watermark-izzet ms-2x ms-fw" title="Izzet"></i>
<i class="ms ms-watermark-japanjunior ms-2x ms-fw" title="Japan Junior"></i>
<i class="ms ms-watermark-jeskai ms-2x ms-fw" title="Jeskai"></i>
<i class="ms ms-watermark-judgeacademy ms-2x ms-fw" title="Judge Academy"></i>
<i class="ms ms-watermark-junior ms-2x ms-fw" title="Junior Super Series"></i>
<i class="ms ms-watermark-juniorapac ms-2x ms-fw" title="Junior Super Series: APAC"></i>
<i class="ms ms-watermark-junioreurope ms-2x ms-fw" title="Junior Super Series: Europe"></i>
<i class="ms ms-watermark-kolaghan ms-2x ms-fw" title="Kolaghan"></i>
<i class="ms ms-watermark-leagueofdastardlydoom ms-2x ms-fw" title="League of Dastardly Doom"></i>
<i class="ms ms-watermark-lorehold ms-2x ms-fw" title="lorehold"></i>
<i class="ms ms-watermark-maestros ms-2x ms-fw" title="Maestros"></i>
<i class="ms ms-watermark-mardu ms-2x ms-fw" title="Mardu"></i>
<i class="ms ms-watermark-mirran ms-2x ms-fw" title="Mirran"></i>
<i class="ms ms-watermark-cutiemark-apples ms-2x ms-fw" title="My Little Pony: Apples"></i>
<i class="ms ms-watermark-cutiemark-balloons ms-2x ms-fw" title="My Little Pony: Balloons"></i>
<i class="ms ms-watermark-cutiemark-butterflies ms-2x ms-fw" title="My Little Pony: Butterflies"></i>
<i class="ms ms-watermark-cutiemark-gems ms-2x ms-fw" title="My Little Pony: Gems"></i>
<i class="ms ms-watermark-cutiemark-rainbow ms-2x ms-fw" title="My Little Pony: Rainbow"></i>
<i class="ms ms-watermark-cutiemark-sparkle ms-2x ms-fw" title="My Little Pony: Sparkle"></i>
<i class="ms ms-watermark-cutiemark-waningmoon ms-2x ms-fw" title="My Little Pony: Waning Moon"></i>
<i class="ms ms-watermark-cutiemark-waxingmoon ms-2x ms-fw" title="My Little Pony: Waxing Moon"></i>
<i class="ms ms-watermark-mps ms-2x ms-fw" title="MPS"></i>
<i class="ms ms-watermark-mtg ms-2x ms-fw" title="MTG"></i>
<i class="ms ms-watermark-mtg10 ms-2x ms-fw" title="Magic 10th Anniversary"></i>
<i class="ms ms-watermark-mtg15 ms-2x ms-fw" title="Magic 15th Anniversary"></i>
<i class="ms ms-watermark-nerf ms-2x ms-fw" title="NERF"></i>
<i class="ms ms-watermark-obscura ms-2x ms-fw" title="Obscura"></i>
<i class="ms ms-watermark-ojutai ms-2x ms-fw" title="Ojutai"></i>
<i class="ms ms-watermark-orderofthewidget ms-2x ms-fw" title="Order of the Widget"></i>
<i class="ms ms-watermark-orzhov ms-2x ms-fw" title="Orzhov"></i>
<i class="ms ms-watermark-phyrexian ms-2x ms-fw" title="Phyrexian"></i>
<i class="ms ms-watermark-planeswalker ms-2x ms-fw" title="Planeswalker"></i>
<i class="ms ms-watermark-prismari ms-2x ms-fw" title="Prismari"></i>
<i class="ms ms-watermark-protour ms-2x ms-fw" title="Pro Tour"></i>
<i class="ms ms-watermark-quandrix ms-2x ms-fw" title="Quandrix"></i>
<i class="ms ms-watermark-rakdos ms-2x ms-fw" title="Rakdos"></i>
<i class="ms ms-watermark-riveteers ms-2x ms-fw" title="Riveteers"></i>
<i class="ms ms-watermark-scholarship ms-2x ms-fw" title="Scholarship Series"></i>
<i class="ms ms-watermark-selesnya ms-2x ms-fw" title="Selesnya"></i>
<i class="ms ms-watermark-silumgar ms-2x ms-fw" title="Silumgar"></i>
<i class="ms ms-watermark-silverquill ms-2x ms-fw" title="Silverquill"></i>
<i class="ms ms-watermark-simic ms-2x ms-fw" title="Simic"></i>
<i class="ms ms-watermark-sultai ms-2x ms-fw" title="Sultai"></i>
<i class="ms ms-watermark-temur ms-2x ms-fw" title="Temur"></i>
<i class="ms ms-watermark-transformers ms-2x ms-fw" title="Transformers"></i>
<i class="ms ms-watermark-witherbloom ms-2x ms-fw" title="Witherbloom"></i>
<i class="ms ms-watermark-wotc ms-2x ms-fw" title="WOTC"></i>
<i class="ms ms-watermark-wpn ms-2x ms-fw" title="WPN"></i>
</p>
</div>
<div class="right">
<h3>Arena Ability Symbols</h3>
<p class="grid">
<i class="ms ms-ability-activated ms-2x ms-fw" title="Activated"></i>
<i class="ms ms-ability-adamant ms-2x ms-fw" title="Adamant"></i>
<i class="ms ms-ability-adapt ms-2x ms-fw" title="Adapt"></i>
<i class="ms ms-ability-addendum ms-2x ms-fw" title="Addendum"></i>
<i class="ms ms-ability-adventure ms-2x ms-fw" title="Adventure"></i>
<i class="ms ms-ability-afflict ms-2x ms-fw" title="Afflict"></i>
<i class="ms ms-ability-afterlife ms-2x ms-fw" title="Afterlife"></i>
<i class="ms ms-ability-aftermath ms-2x ms-fw" title="Aftermath"></i>
<i class="ms ms-ability-alliance ms-2x ms-fw" title="Alliance"></i>
<i class="ms ms-ability-amass-orcs ms-2x ms-fw" title="Amass Orcs"></i>
<i class="ms ms-ability-amass ms-2x ms-fw" title="Amass Zombies"></i>
<i class="ms ms-ability-ascend ms-2x ms-fw" title="Ascend"></i>
<i class="ms ms-ability-backup ms-2x ms-fw" title="Backup"></i>
<i class="ms ms-ability-bargain ms-2x ms-fw" title="Bargain"></i>
<i class="ms ms-ability-blitz ms-2x ms-fw" title="Blitz"></i>
<i class="ms ms-ability-boast ms-2x ms-fw" title="Boast"></i>
<i class="ms ms-ability-casualty ms-2x ms-fw" title="Casualty"></i>
<i class="ms ms-ability-celebration ms-2x ms-fw" title="Celebration"></i>
<i class="ms ms-ability-changeling ms-2x ms-fw" title="Changeling"></i>
<i class="ms ms-ability-channel ms-2x ms-fw" title="Channel"></i>
<i class="ms ms-ability-cleave ms-2x ms-fw" title="Cleave"></i>
<i class="ms ms-ability-combat-condition ms-2x ms-fw" title="Combat Condition"></i>
<i class="ms ms-ability-companion ms-2x ms-fw" title="Companion"></i>
<i class="ms ms-ability-constellation ms-2x ms-fw" title="Constellation"></i>
<i class="ms ms-ability-convoke ms-2x ms-fw" title="Convoke"></i>
<i class="ms ms-ability-convoke-original ms-2x ms-fw" title="Convoke (Original)"></i>
<i class="ms ms-ability-corrupted ms-2x ms-fw" title="Corrupted"></i>
<i class="ms ms-ability-coven ms-2x ms-fw" title="Coven"></i>
<i class="ms ms-ability-d20 ms-2x ms-fw" title="D20"></i>
<i class="ms ms-ability-day-night ms-2x ms-fw" title="Day/Night"></i>
<i class="ms ms-ability-daybound-nightbound ms-2x ms-fw" title="Daybound/Nightbound"></i>
<i class="ms ms-ability-deathtouch ms-2x ms-fw" title="Deathtouch"></i>
<i class="ms ms-ability-decayed ms-2x ms-fw" title="Decayed"></i>
<i class="ms ms-ability-defender ms-2x ms-fw" title="Defender"></i>
<i class="ms ms-ability-devotion ms-2x ms-fw" title="Devotion"></i>
<i class="ms ms-ability-disturb ms-2x ms-fw" title="Disturb"></i>
<i class="ms ms-ability-domain ms-2x ms-fw" title="Domain"></i>
<i class="ms ms-ability-double-strike ms-2x ms-fw" title="Double Strike"></i>
<i class="ms ms-ability-dungeon ms-2x ms-fw" title="Dungeon"></i>
<i class="ms ms-ability-embalm ms-2x ms-fw" title="Embalm"></i>
<i class="ms ms-ability-enlist ms-2x ms-fw" title="Enlist"></i>
<i class="ms ms-ability-enrage ms-2x ms-fw" title="Enrage"></i>
<i class="ms ms-ability-enrage-original ms-2x ms-fw" title="Enrage (Original)"></i>
<i class="ms ms-ability-escape ms-2x ms-fw" title="Escape"></i>
<i class="ms ms-ability-eternalize ms-2x ms-fw" title="Eternalize"></i>
<i class="ms ms-ability-exploit ms-2x ms-fw" title="Exploit"></i>
<i class="ms ms-ability-explore ms-2x ms-fw" title="Explore"></i>
<i class="ms ms-ability-fabricate ms-2x ms-fw" title="Fabricate"></i>
<i class="ms ms-ability-first-strike ms-2x ms-fw" title="First Strike"></i>
<i class="ms ms-ability-flash ms-2x ms-fw" title="Flash"></i>
<i class="ms ms-ability-flying ms-2x ms-fw" title="Flying"></i>
<i class="ms ms-ability-for-mirrodin ms-2x ms-fw" title="For Mirrodin!"></i>
<i class="ms ms-ability-foretell ms-2x ms-fw" title="Foretell"></i>
<i class="ms ms-ability-goad ms-2x ms-fw" title="Goad"></i>
<i class="ms ms-ability-haste ms-2x ms-fw" title="Haste"></i>
<i class="ms ms-ability-hexproof ms-2x ms-fw" title="Hexproof: Generic"></i>
<i class="ms ms-ability-hexproof-white ms-2x ms-fw" title="Hexproof: White"></i>
<i class="ms ms-ability-hexproof-blue ms-2x ms-fw" title="Hexproof: Blue"></i>
<i class="ms ms-ability-hexproof-black ms-2x ms-fw" title="Hexproof: Black"></i>
<i class="ms ms-ability-hexproof-red ms-2x ms-fw" title="Hexproof: Red"></i>
<i class="ms ms-ability-hexproof-green ms-2x ms-fw" title="Hexproof: Green"></i>
<i class="ms ms-ability-hideaway ms-2x ms-fw" title="Hideaway"></i>
<i class="ms ms-ability-improvise ms-2x ms-fw" title="Improvise"></i>
<i class="ms ms-ability-incubate ms-2x ms-fw" title="Incubate"></i>
<i class="ms ms-ability-indestructible ms-2x ms-fw" title="Indestructible"></i>
<i class="ms ms-ability-investigate ms-2x ms-fw" title="Investigate"></i>
<i class="ms ms-ability-jumpstart ms-2x ms-fw" title="Jumpstart"></i>
<i class="ms ms-ability-kicker ms-2x ms-fw" title="Kicker"></i>
<i class="ms ms-ability-landfall ms-2x ms-fw" title="Landfall"></i>
<i class="ms ms-ability-learn ms-2x ms-fw" title=":Learn"></i>
<i class="ms ms-ability-lifelink ms-2x ms-fw" title="Lifelink"></i>
<i class="ms ms-ability-magecraft ms-2x ms-fw" title="Magecraft"></i>
<i class="ms ms-ability-meld ms-2x ms-fw" title="Meld"></i>
<i class="ms ms-ability-menace ms-2x ms-fw" title="Menace"></i>
<i class="ms ms-ability-mentor ms-2x ms-fw" title="Mentor"></i>
<i class="ms ms-ability-mutate ms-2x ms-fw" title="Ninjutsu"></i>
<i class="ms ms-ability-ninjutsu ms-2x ms-fw" title="Explore"></i>
<i class="ms ms-ability-obscura ms-2x ms-fw" title="Obscura"></i>
<i class="ms ms-ability-party ms-2x ms-fw" title="Party"></i>
<i class="ms ms-ability-phyrexian ms-2x ms-fw" title="Phyrexian"></i>
<i class="ms ms-ability-proliferate ms-2x ms-fw" title="Proliferate"></i>
<i class="ms ms-ability-prototype ms-2x ms-fw" title="Prototype"></i>
<i class="ms ms-ability-prowess ms-2x ms-fw" title="Prowess"></i>
<i class="ms ms-ability-raid ms-2x ms-fw" title="Raid"></i>
<i class="ms ms-ability-reach ms-2x ms-fw" title="Reach"></i>
<i class="ms ms-ability-read-ahead ms-2x ms-fw" title="Read Ahead"></i>
<i class="ms ms-ability-reconfigure ms-2x ms-fw" title="Reconfigure"></i>
<i class="ms ms-ability-revolt ms-2x ms-fw" title="Revolt"></i>
<i class="ms ms-ability-ring-bearer ms-2x ms-fw" title="Ring Bearer"></i>
<i class="ms ms-ability-riot ms-2x ms-fw" title="Riot"></i>
<i class="ms ms-ability-role-cursed ms-2x ms-fw" title="Cursed Role"></i>
<i class="ms ms-ability-role-monster ms-2x ms-fw" title="Monster Role"></i>
<i class="ms ms-ability-role-royal ms-2x ms-fw" title="Royal Role"></i>
<i class="ms ms-ability-role-sorceror ms-2x ms-fw" title="Sorceror Role"></i>
<i class="ms ms-ability-role-wicked ms-2x ms-fw" title="Wicked Role"></i>
<i class="ms ms-ability-role-young-hero ms-2x ms-fw" title="Young Hero Role"></i>
<i class="ms ms-ability-specialize ms-2x ms-fw" title="Explore"></i>
<i class="ms ms-ability-spectacle ms-2x ms-fw" title="Spectacle"></i>
<i class="ms ms-ability-static ms-2x ms-fw" title="Static"></i>
<i class="ms ms-ability-summoning-sickness ms-2x ms-fw" title="Summoning Sickness"></i>
<i class="ms ms-ability-surveil ms-2x ms-fw" title="Surveil"></i>
<i class="ms ms-ability-the-ring-tempts-you ms-2x ms-fw" title="The Ring Tempts You"></i>
<i class="ms ms-ability-toxic ms-2x ms-fw" title="Toxic"></i>
<i class="ms ms-ability-training ms-2x ms-fw" title="Training"></i>
<i class="ms ms-ability-trample ms-2x ms-fw" title="Trample"></i>
<i class="ms ms-ability-transform ms-2x ms-fw" title="Transform"></i>
<i class="ms ms-ability-triggered ms-2x ms-fw" title="Triggered"></i>
<i class="ms ms-ability-undergrowth ms-2x ms-fw" title="Undergrowth"></i>
<i class="ms ms-ability-unearth ms-2x ms-fw" title="Unearth"></i>
<i class="ms ms-ability-vigilance ms-2x ms-fw" title="Vigilance"></i>
<i class="ms ms-ability-ward ms-2x ms-fw" title="Ward"></i>
&nbsp;&nbsp;
<i class="ms ms-ability-haktos-the-unscarred ms-2x ms-fw" title="Haktos the Unscarred"></i>
<i class="ms ms-ability-robber-of-the-rich ms-2x ms-fw" title="Robber of the Rich"></i>
</p>
<h3>Arena Exclusive Counters</h3>
<p class="grid">
<i class="ms ms-counter-damage ms-2x ms-fw" title="Damaged"></i>
<i class="ms ms-counter-shield ms-2x ms-fw" title="Shield"></i>
<i class="ms ms-counter-stun ms-2x ms-fw" title="Stun"></i>
</p>
<h3>Magic Online Counters</h3>
<p class="grid">
<i class="ms ms-counter-arrow ms-2x ms-fw" title="Arrow"></i>
<i class="ms ms-counter-brick ms-2x ms-fw" title="Brick"></i>
<i class="ms ms-counter-charge ms-2x ms-fw" title="Charge"></i>
<i class="ms ms-counter-devotion ms-2x ms-fw" title="Devotion"></i>
<i class="ms ms-counter-doom ms-2x ms-fw" title="Doom"></i>
<i class="ms ms-counter-echo ms-2x ms-fw" title="Echo"></i>
<i class="ms ms-counter-flame ms-2x ms-fw" title="Flame"></i>
<i class="ms ms-counter-flood ms-2x ms-fw" title="Flood"></i>
<i class="ms ms-counter-fungus ms-2x ms-fw" title="Fungus"></i>
<i class="ms ms-counter-gold ms-2x ms-fw" title="Gold"></i>
<i class="ms ms-counter-ki ms-2x ms-fw" title="Ki"></i>
<i class="ms ms-counter-lore ms-2x ms-fw" title="Lore"></i>
<i class="ms ms-counter-loyalty ms-2x ms-fw" title="Loyalty"></i>
<i class="ms ms-counter-mining ms-2x ms-fw" title="Mining"></i>
<i class="ms ms-counter-minus ms-2x ms-fw" title="Minus"></i>
<i class="ms ms-counter-minus-uneven ms-2x ms-fw" title="Minus Uneven"></i>
<i class="ms ms-counter-muster ms-2x ms-fw" title="Muster"></i>
<i class="ms ms-counter-paw ms-2x ms-fw" title="Paw"></i>
<i class="ms ms-counter-pin ms-2x ms-fw" title="Pin"></i>
<i class="ms ms-counter-plus ms-2x ms-fw" title="Plus"></i>
<i class="ms ms-counter-plus-uneven ms-2x ms-fw" title="Plus Uneven"></i>
<i class="ms ms-counter-scream ms-2x ms-fw" title="Scream"></i>
<i class="ms ms-counter-skeleton ms-2x ms-fw" title="Skeleton"></i>
<i class="ms ms-counter-skull ms-2x ms-fw" title="Skull"></i>
<i class="ms ms-counter-slime ms-2x ms-fw" title="Slime"></i>
<i class="ms ms-counter-time ms-2x ms-fw" title="Time"></i>
<i class="ms ms-counter-verse ms-2x ms-fw" title="Verse"></i>
<i class="ms ms-counter-void ms-2x ms-fw" title="Void"></i>
<i class="ms ms-counter-vortex ms-2x ms-fw" title="Vortex"></i>
</p>
<h3>Card type and game zone symbols</h3>
<p class="grid">
<i class="ms ms-artifact ms-2x ms-fw" title="Artifact"></i>
<i class="ms ms-commander ms-2x ms-fw" title="Commander"></i>
<i class="ms ms-creature ms-2x ms-fw" title="Creature"></i>
<i class="ms ms-enchantment ms-2x ms-fw" title="Enchantment"></i>
<i class="ms ms-instant ms-2x ms-fw" title="Instant"></i>
<i class="ms ms-land ms-2x ms-fw" title="Land"></i>
<i class="ms ms-planeswalker ms-2x ms-fw" title="Planeswalker"></i>
<i class="ms ms-sorcery ms-2x ms-fw" title="Sorcery"></i>
<i class="ms ms-tribal ms-2x ms-fw" title="Tribal"></i>
<i class="ms ms-plane ms-2x ms-fw" title="Plane"></i>
<i class="ms ms-phenomenon ms-2x ms-fw" title="Phenomenon"></i>
<i class="ms ms-scheme ms-2x ms-fw" title="Scheme"></i>
<i class="ms ms-conspiracy ms-2x ms-fw" title="Conspiracy"></i>
<i class="ms ms-battle ms-2x ms-fw" title="Battle"></i>
<i class="ms ms-battle-siege ms-2x ms-fw" title="Battle - Siege"></i>
</p>
<p class="grid">
<i class="ms ms-multicolor ms-duo ms-duo-color ms-grad ms-2x ms-fw" title="Multicolor"></i>
<i class="ms ms-token ms-2x ms-fw" title="Token"></i>
<i class="ms ms-flashback ms-2x ms-fw" title="Flashback"></i>
<i class="ms ms-rarity ms-2x ms-fw" title="Rarity"></i>
<i class="ms ms-vanguard ms-2x ms-fw" title="Vangaurd"></i>
&nbsp;&nbsp;
<i class="ms ms-hand ms-2x ms-fw" title="Hand"></i>
<i class="ms ms-library ms-2x ms-fw" title="Library"></i>
<i class="ms ms-graveyard ms-2x ms-fw" title="Graveyard"></i>
<i class="ms ms-exile ms-2x ms-fw" title="Exile"></i>
</p>
<h3>Double-faced card symbols</h3>
<p class="grid">
<i class="ms ms-dfc ms-dfc-day ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-night ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-spark ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-ignite ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-moon ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-emrakul ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-enchantment ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-land ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-lesson ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-saga ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-saga-creature ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-front ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-back ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-meld ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-facedown ms-2x ms-fw"></i>
&nbsp;&nbsp;
<i class="ms ms-dfc-modal-face ms-2x ms-fw"></i>
<i class="ms ms-dfc-modal-back ms-2x ms-fw"></i>
</p>
<h3>Guild Symbols</h3>
<p class="grid">
<i class="ms ms-guild-azorius ms-2x ms-fw"></i>
<i class="ms ms-guild-boros ms-2x ms-fw"></i>
<i class="ms ms-guild-dimir ms-2x ms-fw"></i>
<i class="ms ms-guild-golgari ms-2x ms-fw"></i>
<i class="ms ms-guild-gruul ms-2x ms-fw"></i>
<i class="ms ms-guild-izzet ms-2x ms-fw"></i>
<i class="ms ms-guild-orzhov ms-2x ms-fw"></i>
<i class="ms ms-guild-rakdos ms-2x ms-fw"></i>
<i class="ms ms-guild-selesnya ms-2x ms-fw"></i>
<i class="ms ms-guild-simic ms-2x ms-fw"></i>
</p>
<h3>Clan Symbols</h3>
<p class="grid">
<i class="ms ms-clan-abzan ms-2x ms-fw" title="Abzan"></i>
<i class="ms ms-clan-jeskai ms-2x ms-fw" title="Jeskai"></i>
<i class="ms ms-clan-mardu ms-2x ms-fw" title="Mardu"></i>
<i class="ms ms-clan-sultai ms-2x ms-fw" title="Sultai"></i>
<i class="ms ms-clan-temur ms-2x ms-fw" title="Temur"></i>
&nbsp;&nbsp;
<i class="ms ms-clan-atarka ms-2x ms-fw" title="Atarka"></i>
<i class="ms ms-clan-dromoka ms-2x ms-fw" title="Dromoka"></i>
<i class="ms ms-clan-kolaghan ms-2x ms-fw" title="Kologhan"></i>
<i class="ms ms-clan-ojutai ms-2x ms-fw" title="Ojutai"></i>
<i class="ms ms-clan-silumgar ms-2x ms-fw" title="Silumgar"></i>
</p>
<h3>Strixhaven School Symbols</h3>
<p class="grid">
<i class="ms ms-school-lorehold ms-2x ms-fw" title="Lorehold"></i>
<i class="ms ms-school-lorehold ms-duo ms-duo-color ms-2x ms-fw" title="Lorehold (Duo)"></i>
&nbsp;
<i class="ms ms-school-prismari ms-2x ms-fw" title="Prismari"></i>
<i class="ms ms-school-prismari ms-duo ms-duo-color ms-2x ms-fw" title="Prismari (Duo)"></i>
&nbsp;
<i class="ms ms-school-quandrix ms-2x ms-fw" title="Quandrix"></i>
<i class="ms ms-school-quandrix ms-duo ms-duo-color ms-2x ms-fw" title="Quandrix (Duo)"></i>
&nbsp;
<i class="ms ms-school-silverquill ms-2x ms-fw" title="Silverquill"></i>
<i class="ms ms-school-silverquill ms-duo ms-duo-color ms-2x ms-fw" title="Silverquill (Duo)"></i>
&nbsp;
<i class="ms ms-school-witherbloom ms-2x ms-fw" title="Witherbloom"></i>
<i class="ms ms-school-witherbloom ms-duo ms-duo-color ms-2x ms-fw" title="Witherbloom (Duo)"></i>
</p>
<h3>Poleis Symbols</h3>
<p class="grid">
<i class="ms ms-polis-setessa ms-2x ms-fw" title="Setessa"></i>
<i class="ms ms-polis-akros ms-2x ms-fw" title="Akros"></i>
<i class="ms ms-polis-meletis ms-2x ms-fw" title="Meletis"></i>
</p>
</div>
<div style="clear: both;"></div>
<footer>
Made with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a>
</footer>
</body>
</html>