---
title: Boon & Condition Icons of GW2
description: Icons.
tags: Theme
---

<!--

All of icons are rendered by GW2Treasures's Render Service instead of ArenaNet's, for better (smaller) filesize.

- [GW2Treasures's Render Service](https://dev.gw2treasures.com/services/icons)

Than, I reupload it to Imgur, and add some CSS code. Now here are some convenient code whaich able to use in HackMD article. Following sentence is an examples. Just need to use <span></span> tags and add specific Class into it.

> Fractal Renegade is definitely not just sharing Alacrity!
> Fractal Renegade is definitely not just sharing <span class='alacrity'>Alacrity</span>!

And the fianl thing is embedding this "Theme" into "Your alticle". All you need to do is just adding a following line of code into your article. You may place it basically anywhere but not before YAML info.

> {%hackmd @ViafaSia/S1eJACThF %}

If you still don't know what is this or where to place it, may check this picture out, which is what I usually do.

- [this picture](https://i.imgur.com/ER20Ai3.png)

That's all, and thanks for HackMD's guide that taught me how to do this.

- [HackMD](https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-embed-note)

--- Sia

-->

<style>

/*

Icons for Boons and Conditions (16x16)

The syntax that pair of quotation marks can be fill with any "String".

In my code, here is a blank key just for prettier looking in article.
If you are fine with that picture and text stick each other with no speace, feel free to remove it.

- [](https://developer.mozilla.org/en-US/docs/Web/CSS/content)

*/

/* Boons */

span.aegis ::before{ content: url(https://i.imgur.com/5H4gk00.png) ' ' }
span.alacrity ::before{ content: url(https://i.imgur.com/U9XMXRe.png) ' ' }
span.fury ::before{ content: url(https://i.imgur.com/XSuUcRm.png) ' ' }
span.might ::before{ content: url(https://i.imgur.com/ODevPrM.png) ' ' }
span.protection ::before{ content: url(https://i.imgur.com/7iOpzvf.png) ' ' }
span.quickness ::before{ content: url(https://i.imgur.com/KVwgv8D.png) ' ' }
span.regeneration ::before{ content: url(https://i.imgur.com/wBKnTV6.png) ' ' }
span.resistance ::before{ content: url(https://i.imgur.com/eKjskwU.png) ' ' }
span.resolution ::before{ content: url(https://i.imgur.com/UNVlZoz.png) ' ' }
span.stability ::before{ content: url(https://i.imgur.com/ijHE2zE.png) ' ' }
span.swiftness ::before{ content: url(https://i.imgur.com/z0Tr13v.png) ' ' }
span.vigor ::before{ content: url(https://i.imgur.com/nxDZdQu.png) ' ' }

/* Conditions */

span.bleeding ::before{ content: url(https://i.imgur.com/aQTuTYo.png) ' ' }
span.blind ::before{ content: url(https://i.imgur.com/7ezyM5V.png) ' ' }
span.burning ::before{ content: url(https://i.imgur.com/duZhxJY.png) ' ' }
span.chill ::before{ content: url(https://i.imgur.com/1cvszZa.png) ' ' }
span.confusion ::before{ content: url(https://i.imgur.com/AIOiOUh.png) ' ' }
span.cripple ::before{ content: url(https://i.imgur.com/8aC52H4.png) ' ' }
span.fear ::before{ content: url(https://i.imgur.com/a7YLjNI.png) ' ' }
span.immobile ::before{ content: url(https://i.imgur.com/uuucR5r.png) ' ' }
span.poison ::before{ content: url(https://i.imgur.com/ru0jgoA.png) ' ' }
span.slow ::before{ content: url(https://i.imgur.com/OaivLd6.png) ' ' }
span.taunt ::before{ content: url(https://i.imgur.com/ewCv3oF.png) ' ' }
span.torment ::before{ content: url(https://i.imgur.com/z00KeNo.png) ' ' }
span.vulnerability ::before{ content: url(https://i.imgur.com/I3KvjdC.png) ' ' }
span.weakness ::before{ content: url(https://i.imgur.com/4xndEB1.png) ' ' }

</style>