Zest Free

200 premium icons meticulously handcrafted and lovingly optimized for web and mobile.

Preview

Installation

npm install --save zest-free

Usage

1) SVG usage

All of the Zest Free icons are available in SVG and PNG format in the images directory of the package. Icons are organized by category and UID. You can browse the files here.

To use the SVG files in your project, reference them like you would any other NPM package file.

2) JavaScript usage

Zest also includes a JavaScript file that contains all of the SVG paths for the icons. Include zest-free.js in your project like you would any other NPM library. If you're using Webpack with Babel this looks like this:

import ZestIcons from 'zest-free'

The API for Zest is simple. All of the icons can be referenced by UID like this:

ZestIcons['smiling-face'] /* => Returns the Smiling Face Emoji */

This returns an object for each icon that looks like this:

{
  index: 57,
  uid: 'smiling-face',
  name: 'Smiling Face',
  category: 'emoji',
  paths: '<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM9.967 14.744a1 1 0 0 0-1.937.498C8.469 17 10.283 18 12 18c1.785 0 3.452-1.012 3.97-2.76a1 1 0 0 0-1.937-.496C13.773 15.614 12.84 16 12 16c-.84 0-1.772-.385-2.033-1.256zM10.5 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>',
  keywords: [ 'smile', 'happy', 'laugh', 'out loud', 'lol' ],
  packages: [ 'zest-social', 'zest-free' ],
  previous: 'pie-chart',
  next: 'grinning-face'
}

Using this API you can construct an SVG string for an icon like this:

var paths = ZestIcons['smiling-face'].paths
var iconString = '<svg width="24" height="24" viewBox="0 0 24 24">' + paths + '</svg>'

With a bit more imagination, you can create a function for constructing icon elements like this:

function createIconElement(uid, options) {
  if (!(uid in ZestIcons)) { throw new Error('Invalid UID for icon: ' + uid) }
  var options = options || {}
  var size = options.size || 24
  var color = options.color || '#000'
  var className = options.className || ''
  var style = options.valign ? 'valign:' + options.valign : ''
  var paths = ZestIcons[uid].paths
  var div = document.createElement('div')
  div.innerHTML = '<svg width="' + size + '" height="' + size + '" viewBox="0 0 24 24" class="' + className + '" style="' + style + '"><g fill="' + color + '">' + paths + '</g></svg>'
  return div.children[0]
}

var el = document.getElementById('example')
var icon = createIconElement('smiling-face', {color: '#f09', size: 48, valign: 'middle'})
el.appendChild(icon)

Or, if you're using React, you can create and use an Icon component like this:

import React from 'react'
import ZestIcons from 'zest-free'

const Icon = ({uid, size=24, color='', valign, className}) => {
  let paths
  let style = {}
  if (uid in ZestIcons) {
    paths = ZestIcons[uid].paths
  } else {
    throw new Error('Invalid UID for icon: ' + uid)
  }
  if (valign) {
    style['verticalAlign'] = valign
  }
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" className={className} style={style}>
      <g fill={color} dangerouslySetInnerHTML={{ __html: paths }} />
    </svg>
  )
}

const MyPage = () => <div>
  <h1>
    Hello Zest!
    <Icon uid="smiling-face" color="#f09" size="48" valign="middle" />
  </h1>
</div>

License

Zest Free is freely available under the MIT License. View the complete license here.