Malibu is an icon library for use in all of Heroku's digital properties. Malibu uses SVG spritesheets to provide great looking icons at any resolution quickly to our customers.

Importing the sprite

The malibu sprite will need to be in the DOM before icons can be referenced. You can inject it using an AJAX request or simply into your server side template. A simple example using jQuery is demonstrated below.


Once the spritesheet has been imported, SVGs can be used inline like so;

  <use xlink:href="#logo-outline-28"></use>

Classes can be used to modify the icon's size and appearance, like so;

<svg class="h3 w3 gradient-dark-gray">
  <use xlink:href="#logo-outline-28"></use>