React components for using the Malibu SVG spritesheet
Clone or download
Latest commit c8868f9 Nov 28, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src Have demo dynamically fetch the list of icons Apr 18, 2017
src Added new tests for sets Nov 9, 2017
tests React 16 (#6) Nov 28, 2018
.eslintignore Setup linting Apr 7, 2017
.eslintrc.json Add tests Apr 7, 2017
.gitignore Working v1 Apr 6, 2017
.travis.yml poke travis Apr 7, 2017 Working v1 Apr 6, 2017
LICENSE.txt Update License Apr 6, 2017
nwb.config.js Working v1 Apr 6, 2017
package.json v4.0.0 Nov 28, 2018 Added support for different Malibu icon sets Nov 9, 2017
yarn.lock React 16 (#6) Nov 28, 2018


React components for using the Malibu SVG spritesheet.

Travis npm package

JavaScript Style Guide


  1. yarn add @heroku/react-malibu
  2. Make sure that the purple3 stylesheet is included in your website, or the fills will not work.
  3. import { MalibuSprites, MalibuIcon } from '@heroku/react-malibu'
  4. Profit!


Clone the repo, then yarn install. If you want to see the demo server, run yarn start and visit http://localhost:3000 to browse the icons.

You cannot currently publish to NPM using yarn, because there are bugs.

See more in


This package offers two components: <MalibuSprites> and <MalibuIcon>.


Put this component on your page only once, it fetches and displays the entire spritesheet.

By default this will load the product sprites. To load the marketing sprites, add the set property.

<MalibuSprites set='marketing'/>


Use this component to instantiate an icon.

<MalibuIcon name='add-badge-16' size={20} fillClass='dark-gray' extraClasses='foo bar baz'/>
  • name (required): the name of the icon. See the full list at
  • size (default: undefined): the desired rendering size in pixels. Note that most icons come in -16 and -28 pixel variants. Choose the appropriate variant for the scale you wish to render at — for example, if you're rendering an icon at 12px, use the -16 icon as the base and 12 as the size. If you do not specify a size, the icon's native size will be used.
  • fillClass (default: purple): the desired icon fill. Must be one of
    • purple
    • dark-gray
    • red
    • orange
    • green
    • blue
  • extraClasses (optional): a string containing space-separated classnames to apply to the rendered <svg> element.