Customizable Icons Web Font: Particles

The meteoric growth of domains like user experience design and digital marketing has opened numerous doors to create better content and visuals. The aftermath of this revolution is comprised of products and services of higher quality. Furthermore, brand awareness is made easier by the use of visuals, from images to icons and illustrations.

One of the most underrated elements of visuals are icons. Icons create a better understanding of the action behind a design, or they introduce a sense of an identity. The rise of Material Icons and Font Awesome Icons has provided an easier way of introducing identity elements on the page. The problem is that too many sites are using the same identity elements, which creates a monotonous experience for the user, and the brand isn’t recognizable from the crowd.

We’re here to provide a modern approach to icons. We’ve created Particles to better encompass the needs of the graphic designers and the website developers. We are putting forward a collection of predefined icons, and at the same time, a tool that transforms artboards from Adobe Illustrator, into webfonts.

#What’s Particles?

Presslabs Particles is a collection of customizable flat icons. The predefined icons are comprised of two groups, brands, which are composed of shapes, and icons, which are made of lines. When we say brands, we think about well-known logos like Facebook or Twitter. You can view them in our demo page.

#Benefits all-around

Particles provide a breakthrough in how webfont are handled on webpages. The main benefits are the following:

1. SEO friendly

   It’s better to use <i class=”particle”>add</i>, so that the browser will interpret add as content, and not as a class, which will be ignored by Google Bots, like it is in the traditional <i class=”particle add”></i>.

2. Efficient

   Using icomoon to generate fonts needs human intervention, which is time-consuming when we’re talking about a collection of icons. The process of creating webfonts with Particles is short; you have to export from Adobe Illustrator, write two commands and you’re set.

3. Ease of use

   Writing a few lines of code, as shown in A guide to using the predefined collection, makes adding the icons to a page effortless.

4. Flexible

   We offer the choice of creating custom icons and collections with an easy setup.

#How we designed and developed the webfont

Our main aim was to build SVG icons that could be easily integrated into our projects. We made use of the best technologies available today.

We were inspired by Feather Icons in designing Particles. The icons were drawn in Adobe Illustrator, each icon on a 64x64px artboard. A pixel grid was used, and whenever possible, the points had fixed coordinates for optimization. Next, the icons were exported as SVGs.

When generating a webfont, the SVGs need to contain only paths, and not lines or shapes. Consequently, we converted the SVGs from shapes (lines) into paths with custom offset, by using Paper.js, SVGO, and adapted a script written by Jürg Leni, one of the creators of Paper.js; all of these orchestrated by Gulp task runner. We used different implementations for converting brands and icons, each having different attributes to convert. After the conversion, the result was a set of “clean” SVGs with a singular path and no shapes.

Next, the webfonts (ttf, eot, woff, woff2, svg) were generated by using Grunt alongside grunt-webfont, which we modified it in order to support ligatures.

#A guide to using the predefined collection

To begin using the icons, you have to download the project and install the dependencies and packages from the Particles GitHub page.

You can define the icons in different environments like:

• HTML

<link href="/css/particles.css" rel="stylesheet">
<i class=”particle”>add</i>

•  SCSS (webpack)

$particles-font-path: “~presslabs-particles-icons/dist/fonts”;
@import “presslabs-particles-icons/dist/css/particles”;

.add {
@include particle(‘add’);
}

• React as individual component

import { AddIcon } from 'react-particles-icons'

const Demo = () => {
  return (
    <AddIcon />
  )
}

export default Demo

• VueJS as individual component

<template>
  <add-icon></add-icon>
</template>
<script>
import { AddIcon } from 'vue-particles-icons'

export default {
  components: { AddIcon },
}
</script>

• React – unique component with props

import Particle from 'react-particles-icons'

const Demo = () => {
  return (
    <Particle name="add" />
  )
}

export default Demo

• VueJS – unique component with props

<template>
  <particle name="add"></particle>
</template>
<script>
import Particle from 'vue-particles-icons'

export default {
  components: { Particle },
}
</script>

#Creating custom icons

As a designer, you must have felt the strenuous work of trying to create a webfont out of your drawings. Particles was developed in order to make it easy to design and develop fonts.

In order to create the icons you want, follow the steps below.

     1.  Create the desired icon blueprint in Adobe Illustrator

    2.  Export the icon or set of icons

    3.  Set the format settings

    4.  To convert source SVG files to ready-for-font SVG, run the command:

yarn convert

    5.  To generate web fonts package and demo files, run:

yarn generate

    6.  To build the demo, run:

yarn build

    7.  To view the demo in the browser window, you know the drill:

yarn dev

Open-source projects are at the heart of our philosophy, and Particles encompasses this thoroughly. A new set of beautifully designed vector icons, and a straightforward way to design and develop custom webfonts is what we give to the community.

Below you can find the full list of predefined icons.

All product and company names are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

If you wish to download the project, you can do so on the Particles GithHub repo. Furthermore, we provide packages for React and VueJS.

In case you have any questions, feel free to drop us a line at ping@presslabs.com.