Get started

Malibu can be included via our cdn. Place the following before the closing </body> tag in your application:

$('<div>').load('https://www.herokucdn.com/malibu/latest/sprite.svg', function() {
    $('body').append($(this).html());
});

To use an icon in HTML you can reference it in the following way:

<svg role="img" aria-labelledby="exampleicon" class="w2 h2 fill-purple">
    <title id="exampleicon">informational icon description</title>
    <use xlink:href="#app-28" />
</svg>

Once your application loads the SVG sprite you can reference an icon by it's name and assign any purple3/shibori3 classes to give it dimensions and style. A complete list of available icons can be found in our library documentation.

Accessibility

If the icon is informational (used without a visible, descriptive label) a <title> element is needed as the first child of the containing element with a description of the icon or associated action. The containing element must also have an aria-labelledby attribute, with a matching ID on the <title> element.

If the icon is decorational (has a visible label that describes what the icon represents) an empty <title> element is still required.