# Icons

Provides a light-touch abstraction for styling icons based on the dimensions of their container.

<div class="example">
    <span class="gel-icon" style="width: 32px">
        <svg><use xlink:href="#gel-icon-quote"></use></svg>
    </span>

    <span class="gel-icon" style="width: 32px">
        <svg><use xlink:href="#gel-icon-search"></use></svg>
    </span>

    <span class="gel-icon gel-icon--loading" style="width: 32px">
        <svg><use xlink:href="#gel-icon-loading"></use></svg>
    </span>
</div>

```html
<span class="gel-icon" style="width: 32px">
    <svg><use xlink:href="#gel-icon-quote"></use></svg>
</span>

<span class="gel-icon" style="width: 32px">
    <svg><use xlink:href="#gel-icon-search"></use></svg>
</span>

<span class="gel-icon gel-icon--loading" style="width: 32px">
    <svg><use xlink:href="#gel-icon-loading"></use></svg>
</span>
```

<link rel="stylesheet" href="https://bbc.github.io/grandstand/assets/css/grandstand-latin-flexbox-4.1.0.enhanced.css">

<div style="display: none">
<svg>
<symbol viewBox="0 0 32 32" id="gel-icon-loading"><path d="M29.8 8l-3.5 2c1 1.8 1.6 3.8 1.6 6 0 6.6-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4V0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16c0-2.9-.8-5.6-2.2-8z"/></symbol>
<symbol viewBox="0 0 32 32" id="gel-icon-quote"><path d="M0 17v15h15V17H7c.2-5.9 2.4-8.8 8-9.9V0C6.7 1.2.2 8.3 0 17zm32-9.9V0c-8.3 1.2-14.8 8.3-15 17v15h15V17h-8c.2-5.9 2.4-8.8 8-9.9z"/></symbol>
<symbol viewBox="0 0 32 32" id="gel-icon-search"><path d="M32 28.5l-8.2-8.2c3.4-5.1 2.9-12-1.6-16.4C19.7 1.3 16.3 0 13 0 9.7 0 6.3 1.3 3.8 3.8c-5.1 5.1-5.1 13.3 0 18.4C6.3 24.7 9.7 26 13 26c2.5 0 5.1-.7 7.3-2.2l8.2 8.2 3.5-3.5zM6.6 19.4C4.9 17.7 4 15.4 4 13s.9-4.7 2.6-6.4C8.3 4.9 10.6 4 13 4c2.4 0 4.7.9 6.4 2.6 3.5 3.5 3.5 9.2 0 12.7-1.7 1.7-4 2.6-6.4 2.6s-4.7-.8-6.4-2.5z"/></symbol>
</svg>
</div>