Introducing Natura11y's own icon library.

Natura11y icons are free to use for commercial or personal use. Include them as a web font or an SVG sprite.

Icon Font (CDN)

Place the Natura11y icon font link tag in the <head> your document. Create icons with <span> or <i> tags. The first .icon class is required for general styling. The second .icon-{x} class specifies which icon to use. Here x equals the icon name (Figure 1).

<!-- Natura11y Icon CSS -->
<link href="https://cdn.jsdelivr.net/gh/cavidano/natura11y-icons@main/dist/natura11y-icons.min.css" rel="stylesheet">

<!-- Icon HTML: your choice of <span> or <i> tags -->
<span class="icon icon-home"></span>
Figure 1

SVG Sprites

Include Natura11y Icons with the svg sprite and the use element. Because of cross-origin issues, it's best to host the svg sprite file locally.

Step 1: Get the sprite file

With the button below, download the natura11y-icons-sprite.svg file and place it somewhere within your project's directory.

Download SVG Sprite

Step 2: Include the Javascript

For sake of example, include the script tag from Figure 2 in your document's footer. Preferably, just before the closing </body> tag.

<script>
    const ajax = new XMLHttpRequest();

    ajax.open('GET', './path/to/natura11y-icons-sprite.svg', true);
    ajax.send();
    ajax.onload = () => {
        const div = document.createElement('div');
        div.className = 'natura11y-icons-sprite';
        div.innerHTML = ajax.responseText;
        document.body.insertBefore(div, document.body.childNodes[0]);
    };
</script>
Figure 2

Step 3: Reference the icons

Create an SVG icon with the code from Figure 3. Instead of using a class to specificy the icon, include the icon name in the <use> tags href.

<svg class="icon">
    <use href="#home"></use>
</svg>
Figure 3