Link to the “About” sectionAbout
Snappy Icons is a pack of 360+ open-source vectors. Today it ships for React Native. Web and plain React builds 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.
Link to the “Design” sectionDesign
Snappy Icons use a 24x24 grid and a 2px stroke. You can change the stroke width if you need to.
SVG strokes center on the path by default, so every icon follows that rule.
Link to the “NPM Package” sectionNPM Package
The React Native build depends on
react-native-svg. A build step turns each icon into 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>
);
Link to the “Conclusion” sectionConclusion
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, open a pull request on GitHub.
I will keep adding icons. If you want a specific icon designed, let me know.
To make the icons come faster, you can buy me some coffee.
