Snappy Icons

• 3 min read

A collection of more than 360 open source vector icons. The pack is currently available as an npm package for React Native.

Snappy Icons cover picture

About

Snappy icons is an icon pack containing more than 360 open source vector icons. The pack is currently available for use in React Native projects with planned support for web and React.
Check out all the icons at snappyicons.com
I noticed I've been using Feather icons for most of my projects. Feather is a beautiful and minimal collection of icons. However, I am not the only one who noticed that. With 21k GitHub stars and counting, everyone and their mom started using Feather. I wanted to build an icon pack from scratch to use in my projects.

Design

24x24 grid explanation
Snappy Icons are designed on a 24x24 grid. They are designed using a 2px stroke, but can be modified to use any other stroke width.

Because svg path natively supports only a centered stroke, all the icons are designed in that way.

Centered stroke

NPM Package

As most of my time is spent developing with React Native, I decided to start with a React Native package. It's a bit more challenging to use svgs in React Native than on web.

To support svgs, the package uses react-native-svg package. To render the icons using react-native-svg, all the svgs needed to be converted into a format that the package can read. That means converting all the <path> tags into <Path> components, all the <rect> tags into <Rect> components, and so on.

I noticed many React Native icon pack import the icons using their name:

import { ChevronRight, Home } from 'some-icon-pack';

const App = () => {
  return (
    <View>
      <ChevronRight />
      <Home />
    </View>
  );
};

I wanted to be able to simply import the pack and use any of its available icons:

import Snappy from 'react-native-snappy';

const App = () => {
  return (
    <View>
      <Snappy name='chevron-right' />
      <Snappy name='home' />
    </View>
  );
};

Both methods have their pluses and minuses. I chose the latter method because I believe it doesn't slow down development. Moreover, with that method you also get some perks for free. It allows for dynamic iteration through the icon pack:

import Snappy, { snappyNameArray } from 'react-native-snappy';

const App = () => {
  return (
    <View>
      {snappyNameArray.map((iconName) => (
        <Snappy name={iconName} />
      ))}
    </View>
  );
};

It also helps with TypeScript typing. All the icons live in a large object from which all the icon names can be dynamically extracted. This allows for a better app development experience when finding a particular icon:

Finding icon names in code

Conclusion

I started drawing icons around November 2021. Whenever I had an idea for an icon, or just some time to relax, I opened up Figma and started drawing. I learn a lot about icon design, and finally created my first npm package.

To use the icon pack in your next React Native project check it out on npm.
If you find an issue, let me know by creating a pull request on github.
I will continue working on the icon pack, updating it with new icons. If you want a specific icon designed, let me know.
To make the icons come faster, you can always buy me some coffee.

EdiTable

8 min read

Save, modify, and extend recipes to suit your needs. An iPad app that adjusts recipes to the needs of its users.

EdiTable

VersInDesign

6 min read

An interactive timeline tool used for versioning of InDesign projects.

VersInDesign

XAgo

6 min read

Mobile application designed, developed, and deployed in seven days. Keep track of when was the last time you did something

XAgo
Go back home