node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



webpack based - load only what you need - svg inline icons.
See ceri-flag if you need a svg inline flag.


  • plain JS - no dependencies
  • 21kB unzipped - even smaller when using multiple ceri components


If you need other free icon sets, let me know..


heavily inspired by vue-awesome.

Change in 0.2

  • ceri-icon is now a webpack plugin instead of a loader.
    See changed (easier) usage instruction below.
  • initial optimiziation of icons is way faster on multi-core machines.


npm install --save-dev ceri-icon


// webpack.config.js
Icons = require("ceri-icon")
module.exports = {
    new Icons(["fa-heart","gly-heart"])
  • in your project
<ceri-icon name="fa-heart"></ceri-icon>

For examples see dev/.


Name type default description
name String - (required) name of the icon
flip-v String - apply vertical flipping
flip-h String - apply horizontal flipping
offset-x Number 0 move the icon left/right within its borders in percentage (relative to the center)
offset-y Number 0 move the icon up/down within its borders in percentage (relative to the center)
label String name aria-label
size Number (font-size) height of the icon in px
scale Number 1 size multiplier
hcenter Boolean false sets the height to equal the parentElement and moves the icon to the center

Icon stack

<ceri-icon name="fa-camera">
  <ceri-icon name="fa-ban" style="color:red" scale=2></ceri-icon>

offset-x and offset-y on nested ceri-icon increase the size of the icon boundaries, so both will stay fully visible. The parent ceri-icon will be positioned in the center of the, then larger, boundaries.


ceri-icon comes without css, so no spinning included, you can do it manually by adding this css to your website.

/* css */
.spin {
  animation: spin 1s 0s infinite linear;
@keyframes spin {
  0% {
    transform: rotate(0deg);
  100% {
    transform: rotate(360deg);
<ceri-icon name="fa-spinner" class="spin"></ceri-icon>


Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.


Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.