Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


This is an ember addon, that generates a sprite sheet from a folder of images. A sprite sheet consists of a single CSS file and a single image file.

It uses broccoli-sprite to do so, and you can read more details there.

This module's purpose is to allow you to use broccoli-sprite within an ember-cli application.


As with any other ember addon, you simply need to run the install command:

ember install ember-sprite

If you are still using Ember CLI < v1.0, please upgrade to the latest version. Check this package's version of ember-cli under devDependencies for the best compatibility.

That is all!


All the configuration options are pretty much the same as those in broccoli-sprite. There is an extra option removeSrcFiles which tells addon to remove source images after the sprite is finished.

The only thing that you need to do in addition is:

  • Put your images in the public folder (or a subfolder of public)
  • Add an array of sprite options for broccoli-sprite under sprite when instantiating EmberApp:

For example, if the images you would like to be sprited are in public/images/sprites, you can configure your app, in ember-cli-build.js, like so:

var app = new EmberApp({
  /* other options */
  sprite: [
      debug: true,
      src: [
      removeSrcFiles: true,
      spritePath: 'assets/sprites.png',
      stylesheetPath: 'assets/sprites.css',
      stylesheet: 'css',
      stylesheetOptions: {
        prefix: 'icon-',
        spritePath: '/assets/sprites.png',
        pixelRatio: 2,
      layoutOptions: {
        padding: 2,
      optiping: (process.env.NODE_ENV === 'production'),
    // optional: more sprite sheet configurations
    // , { ... }


From scratch

# New ember-cli application
ember new ember-sprite-demo
ember install ember-sprite

# download images for spriting
mkdir -p public/images/sprites
curl > public/images/sprites/emberjs.png
curl > public/images/sprites/iojs.png
curl > public/images/sprites/js.png

# add images to main template
echo '<div class="icon-emberjs"></div>' >> app/templates/application.hbs
echo '<div class="icon-iojs"></div>' >> app/templates/application.hbs
echo '<div class="icon-js"></div>' >> app/templates/application.hbs

# modify `EmberApp` to add the sprite configuration shown above
$EDITOR ember-cli-build.js

# run the application
ember server
$BROWSER http://localhost:4200
# check that sprited images appear

From bundled demo page

Alternatively, you can clone this repository and run ember server to see a sample application that generates both retina and non-retina sprites.

cd tests/dummy
ember server

Road map

  • Remove need to link additional stylesheet from index.html
    • by concatenating the sprite sheet's CSS with the main app's CSS
  • Rerun upon file changes which trigger livereload


Maintained by Brendan Graetz

Additional contributions from: