Malibu

Malibu is an SVG icon library for use in all Heroku products.

Malibu uses SVG spritesheets to provide over 100 scalable icons & glyphs for use in our product and marketing properties at any size.

Browse library

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.

Use malibu in Ember

An Ember addon is available to include malibu icons using a helper service in Ember applications.

heroku/ember-malibu-icon

Use malibu in React

A React library is available to include malibu icons as components in React based applications.

heroku/react-malibu

Contribute to malibu

You can find information on running malibu locally on your machine in the readme.

If you’d like to contribute back to malibu, by adding classes or utilities you feel are missing, please start by opening an issue on heroku/malibu

Issues with malibu?

If you have an issue using malibu you can open an issue on heroku/malibu and the design team will do their best to help you.

You can also ping us in the #talk-malibu channel on Slack to discuss malibu and our icon libraries.