About
Snappy Icons is a pack of 360+ open-source vectors. Today it ships for React Native; web and plain React are on the roadmap.
Full set: snappyicons.com
I reached for Feather on almost every project. It is minimal and sharp, and with 21k+ GitHub stars it is also everywhere. I wanted my own set drawn to my own constraints.
Design
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.
SVG strokes center on the path by default, so every icon is drawn that way.
NPM Package
The React Native build depends on
react-native-svg. Icons are generated as that library’s components (<Path>, <Rect>, and so on).Basic usage:
import Snappy from 'react-native-snappy';
const App = () => (
<View>
<Snappy name='chevron-right' />
<Snappy name='home' />
</View>
);
snappyNameArray lists every icon name if you need a gallery or a picker:import Snappy, { snappyNameArray } from 'react-native-snappy';
const App = () => (
<View>
{snappyNameArray.map((iconName) => (
<Snappy key={iconName} name={iconName} />
))}
</View>
);
Conclusion
I started drawing in November 2021. Whenever I had an idea—or half an hour to unwind—I opened Figma. Along the way I learned a lot about icon construction and shipped 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.
