slopfront
Reddit, read-only. No JavaScript. No cookies. No tracking.
preferences

[Showoff Saturday] Free pencil-style icon set, now 260 icons, with a setting that goes from sketchy to exact shapes

66 points · submitted 3d ago by u/brightlyColossal · Showoff Saturday

Matita is a set of pencil-style SVG icons, drawn by code from simple shapes (lines, circles, arcs), so every build draws exactly the same paths. 0.4.0 came out yesterday:

  • 60 new icons (200 to 260), including a medical and science set, which people asked for last time
  • a wobble setting from 0 to 1: <SketchIcon name="calendar" wobble={0} /> draws exact shapes, 1 is the default sketchy look, 0.4 is a calm hand
  • ready-made exact SVG files at @matita/icons/exact/<name>.svg
  • React, plain SVG, a script tag, a sprite; MIT; no signup

Try the slider and copy snippets here: https://matita.dev (changelog: https://matita.dev/changelog/, what is next: https://matita.dev/roadmap/). If an icon you need is missing, open an issue and I'll draw it: https://github.com/matita-dev/icons/issues

Feedback on anything that looks wrong is very welcome.

11 comments · 88% upvoted · source · other discussions

comments

becauseiliked 2 points · 2d ago

I love it, I am developing a mobile app and I chose hand-drawn styled design langauge, this fits so well for my usecase. Congrats!

brightlyColossal [OP] 2 points · 2d ago

Thank you, that means a lot! What kind of app are you building? I’d love to see it, and if there’s an icon you’re missing, tell me and I’ll add it.

becauseiliked 2 points · 2d ago

plz dm, I am not sure if I can share a link here, I have a new account so mods might be extra careful with that.

CobaltMazz 2 points · 2d ago

Liked this the previous time as well! Wonder if it would be possible to add a property to easily implement draw animations: like in your hero section, but standardised for each icon from 0 to 1. Animating the stroke-dashoffset of course works, but has to be fine tuned for each icon.

brightlyColossal [OP] 3 points · 2d ago

Thanks for coming back to it! A standard 0 to 1 draw prop makes sense, and it would save you tuning each icon by hand. I’ll look at what’s possible with the current paths. Would you prefer a React prop like draw={0.6}, or a CSS variable you can animate yourself? I’ll open an issue so you can follow it.

CobaltMazz 3 points · 2d ago

Personally I like the flexibility of not being vendor locked, so a CSS or vanilla JS variable would be great.

brightlyColossal [OP] 2 points · 2d ago

Thanks, a CSS variable it is. I opened an issue so you can follow it: matita-dev/icons#20

The idea is --matita-draw: 0 to 1, with every icon normalised so you don’t tune it per icon. I’ll update the issue when there’s something to try.

CobaltMazz 2 points · 2d ago

Awesome! So quick. Especially interested in a v2 with sequential drawing. 

brightlyColossal [OP] 2 points · 2d ago

Thanks! Just to be clear, it’s still an idea at this stage. I’ve been experimenting with it, but nothing is built yet. Sequential drawing is a good point, and I’ll add it to the issue for v2.

[deleted] 1 points · 3d ago

[removed]

brightlyColossal [OP] 2 points · 2d ago

“La imperfección hecha reproducible” is a better tagline than mine. Thanks!