5 ms·

Show HN: ICONSVG – Customize and Generate Common SVG Icons

227 points by gaddafirusli 8y ago

Yabood 8y ago
Nice work! I'd pay for an extended version of this (i.e social media icons). We're currently using https://nucleoapp.com/ https://nucleoapp.com/.
myfonj 8y ago
First, really nice app, nice to see clean line graphics constructed with real lines (strokes) and exploiting its benefits. I often find myself writing such icons by hand because I want them to be like this and it feels mostly faster to make it yourself than to search for some ready existing, because these are mostly exported to fills, presumably for better reliability. I have some remarks about the "size (px)" / "stroke width (px)" descriptions. The "px" (or more precisely "virtual / CSS pixel") value for stroke in app would currently apply only for icon size value of 24 (px, matching viewport), what may seem quite misleading. "1px stroke" in "16px size" is obviously not rendered as full colour CSS pixel, and hypothetically might be rendered as one physical pixel on screen with 150% DPI ratio if they happen to be shifted by half CSS pixel. I'm pretty sure you know what I try to describe: SVG line with stroke-width="1" sitting on whole integer coordinates in non-resized SVG on display with 100% DPI scale will be rendered as "2px" aliased line around that pixel boundary. It would be interesting to (try to) introduce option to have real (CSS) pixel stroke widths accompanied with mechanism that will align them on CSS pixel grid. (I'm not sure it is doable and worth the effort, because it presumably does not have universal solution for every single DPI, but maybe something could be learnt trying.)
gaddafirusli 8y ago
Hello ! I made this tool because I feel like there should be a much simpler way to quickly generate/customise common SVG icons for my project, especially while doing bunch of front-end development. You no longer have to open any design tool just to resize or change stroke style/color. You'll be able to do that and copy the resulting SVG code directly from this tool! Let me know what do you think about this project Most of the icons in this project are optimised version of feathericons.com by Cole Bemis (huge fan )
- rvwaveren 8y ago
  Very cool! Thanks!
- ochronus 8y ago
  Cool stuff! Thanks for making it and sharing :)
- megous 8y ago
  You can customize whatever you like by using var(--color, #000) in SVG and --color: #123 in CSS. No need for any tools. :)
  - myfonj 8y ago
    Or just inherit colour that was set for text. path { stroke: currentColor; } https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
  - jakelazaroff 8y ago
    Only if you're including the markup inline as opposed to as an image, which may or may not be desirable!
    - megous 8y ago
      Yes, you need at least xlink to an external SVG file. But that's pretty close to <img>. It's just one more element.
- some1else 8y ago
  Hey there's definitely a need for something like this. But the quantized stroke width is too limiting to make this icon set widely applicable. The ability to finely tune the icon weights, in a similar way like the weight of a variable webfont, would be truly game-changing. I'm not particularly enthusiastic about outline icons, as I feel like they go against some gestalt principles, but being able to blend shapes in with the rest of the art regardless of scale would be really powerful.
nestorherre 8y ago
Hey, this is pretty useful! For me (and I believe a ton of other of devs, especially back-end oriented ones), it is tiring and boring having to spend time and effort on design stuff, which is needed but could be done in a easier/simpler way, and I believe you're on the right path about this. Keep up the good work.
- gaddafirusli 8y ago
  Thanks! That's the goal of this project. Let me know if there's more that can be done.
jypepin 8y ago
This is an amazing idea and seems like it is well delivered. Definitely useful, especially for simpler ones like arrows, etc, since it allows us engineers to by pass the designers and let them focus on the hard stuff!
m1el 8y ago
Hi, this seems very useful. Since I couldn't find this anywhere on the website, what's the license on the generated SVG files and on the tool itself? Would you release the source code?
- gaddafirusli 8y ago
  The icons are available for free - for personal and commercial use. I have no plan to open source the tool, for now :)
  - souenzzo 8y ago
    I was looking for the sources I think that it could be JSX, hiccup and others output support
- robocat 8y ago
  The about link in the top menu of the page has some information, although not what you are asking for.
jedimastert 8y ago
I don't know if this a bug, but if you choose butt ends then all of the points in symbols like the question marks and exclamation points and information "i"s disappear. I'm not too familiar with SVG, but I'm guessing you're using a single vector point and it ends up having zero width or something like that. I really like the product, by the way. It's a great idea
ahpearce 8y ago
Might be nice to have an "apply all" and "download all"
Stuffe 8y ago
This is pretty cool, have you thought about adding layers and translations too? Could be really useful to merge images
33degrees 8y ago
This is great! Two things: 1) It would be great to be able to set options globally and download a bunch in one shot 2) Solid icons are generally easier to to recognize, it would be nice to have a second set of icons for that <https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/> https://uxmovement.com/mobile/solid-vs-outline-icons-which-a...
franky47 8y ago
This is a very nice tool, well done ! My wishlist of nicethingstohave would be: - A choice of camelCase output for attributes (JSX-friendly) - multiple selection and download
css 8y ago
Getting this when I visit: > This site is blocked due to a security threat that was discovered by the Cisco Umbrella security researchers.
- limejuice 8y ago
  Yep, my company's web filter using opendns is blocking this website. Looks like it has been flagged as malware. "This site is blocked due to a security threat that was discovered by the Cisco Umbrella security researchers."
- efiftythree 8y ago
  fwiw, same here. OpenDNS blocking the site.
- gaddafirusli 8y ago
  I'm not sure if I can do anything about this. Any suggestions?
superhuzza 8y ago
Nice work, and thanks for not polluting the svg with unnecessary information or links.
huntermeyer 8y ago
This is great. Would love to see a map marker/pin icon.
- gaddafirusli 8y ago
  Just added them in for you :)
  - huntermeyer 8y ago
    Awesome! Thank you.
aylmao 8y ago
This is amazing. I can already see it making some of my workflows much simpler. Thank you!
robbrown451 8y ago
These are nice, thanks. Two feature requests: backgrounds and shadows. Shadow can be done by repeating the path, and applying a feGaussianBlur.
jarek-foksa 8y ago
If you need a bit more advanced SVG editing functionality, check out my app Boxy SVG [1]. It allows you to easily define and manage an entire iconset in a single SVG file [2] (each icon can be placed in a separate <symbol> element). [1] https://boxy-svg.com https://boxy-svg.com [2] https://firebasestorage.googleapis.com/v0/b/boxy-svg.appspot.com/o/static%2Fpress-3.png?alt=media https://firebasestorage.googleapis.com/v0/b/boxy-svg.appspot...

227 points by gaddafirusli 8y ago

Nice work! I'd pay for an extended version of this (i.e social media icons). We're currently using https://nucleoapp.com/ https://nucleoapp.com/.

myfonj 8y ago

First, really nice app, nice to see clean line graphics constructed with real lines (strokes) and exploiting its benefits. I often find myself writing such icons by hand because I want them to be like this and it feels mostly faster to make it yourself than to search for some ready existing, because these are mostly exported to fills, presumably for better reliability. I have some remarks about the "size (px)" / "stroke width (px)" descriptions. The "px" (or more precisely "virtual / CSS pixel") value for stroke in app would currently apply only for icon size value of 24 (px, matching viewport), what may seem quite misleading. "1px stroke" in "16px size" is obviously not rendered as full colour CSS pixel, and hypothetically might be rendered as one physical pixel on screen with 150% DPI ratio if they happen to be shifted by half CSS pixel. I'm pretty sure you know what I try to describe: SVG line with stroke-width="1" sitting on whole integer coordinates in non-resized SVG on display with 100% DPI scale will be rendered as "2px" aliased line around that pixel boundary. It would be interesting to (try to) introduce option to have real (CSS) pixel stroke widths accompanied with mechanism that will align them on CSS pixel grid. (I'm not sure it is doable and worth the effort, because it presumably does not have universal solution for every single DPI, but maybe something could be learnt trying.)

gaddafirusli 8y ago

Hello ! I made this tool because I feel like there should be a much simpler way to quickly generate/customise common SVG icons for my project, especially while doing bunch of front-end development. You no longer have to open any design tool just to resize or change stroke style/color. You'll be able to do that and copy the resulting SVG code directly from this tool! Let me know what do you think about this project Most of the icons in this project are optimised version of feathericons.com by Cole Bemis (huge fan )

rvwaveren 8y ago
Very cool! Thanks!
ochronus 8y ago
Cool stuff! Thanks for making it and sharing :)
megous 8y ago
You can customize whatever you like by using var(--color, #000) in SVG and --color: #123 in CSS. No need for any tools. :)
- myfonj 8y ago
  Or just inherit colour that was set for text. path { stroke: currentColor; } https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
- jakelazaroff 8y ago
  Only if you're including the markup inline as opposed to as an image, which may or may not be desirable!
  - megous 8y ago
    Yes, you need at least xlink to an external SVG file. But that's pretty close to <img>. It's just one more element.
some1else 8y ago
Hey there's definitely a need for something like this. But the quantized stroke width is too limiting to make this icon set widely applicable. The ability to finely tune the icon weights, in a similar way like the weight of a variable webfont, would be truly game-changing. I'm not particularly enthusiastic about outline icons, as I feel like they go against some gestalt principles, but being able to blend shapes in with the rest of the art regardless of scale would be really powerful.

nestorherre 8y ago

Hey, this is pretty useful! For me (and I believe a ton of other of devs, especially back-end oriented ones), it is tiring and boring having to spend time and effort on design stuff, which is needed but could be done in a easier/simpler way, and I believe you're on the right path about this. Keep up the good work.

gaddafirusli 8y ago
Thanks! That's the goal of this project. Let me know if there's more that can be done.

jypepin 8y ago

This is an amazing idea and seems like it is well delivered. Definitely useful, especially for simpler ones like arrows, etc, since it allows us engineers to by pass the designers and let them focus on the hard stuff!

m1el 8y ago

Hi, this seems very useful. Since I couldn't find this anywhere on the website, what's the license on the generated SVG files and on the tool itself? Would you release the source code?

gaddafirusli 8y ago
The icons are available for free - for personal and commercial use. I have no plan to open source the tool, for now :)
- souenzzo 8y ago
  I was looking for the sources I think that it could be JSX, hiccup and others output support
robocat 8y ago
The about link in the top menu of the page has some information, although not what you are asking for.

jedimastert 8y ago

I don't know if this a bug, but if you choose butt ends then all of the points in symbols like the question marks and exclamation points and information "i"s disappear. I'm not too familiar with SVG, but I'm guessing you're using a single vector point and it ends up having zero width or something like that. I really like the product, by the way. It's a great idea

ahpearce 8y ago

Might be nice to have an "apply all" and "download all"

Stuffe 8y ago

This is pretty cool, have you thought about adding layers and translations too? Could be really useful to merge images

33degrees 8y ago

This is great! Two things: 1) It would be great to be able to set options globally and download a bunch in one shot 2) Solid icons are generally easier to to recognize, it would be nice to have a second set of icons for that <https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/> https://uxmovement.com/mobile/solid-vs-outline-icons-which-a...

franky47 8y ago

This is a very nice tool, well done ! My wishlist of nicethingstohave would be: - A choice of camelCase output for attributes (JSX-friendly) - multiple selection and download

css 8y ago

Getting this when I visit: > This site is blocked due to a security threat that was discovered by the Cisco Umbrella security researchers.

limejuice 8y ago
Yep, my company's web filter using opendns is blocking this website. Looks like it has been flagged as malware. "This site is blocked due to a security threat that was discovered by the Cisco Umbrella security researchers."
efiftythree 8y ago
fwiw, same here. OpenDNS blocking the site.
gaddafirusli 8y ago
I'm not sure if I can do anything about this. Any suggestions?

superhuzza 8y ago

Nice work, and thanks for not polluting the svg with unnecessary information or links.

huntermeyer 8y ago

This is great. Would love to see a map marker/pin icon.

gaddafirusli 8y ago
Just added them in for you :)
- huntermeyer 8y ago
  Awesome! Thank you.

aylmao 8y ago

This is amazing. I can already see it making some of my workflows much simpler. Thank you!

robbrown451 8y ago

These are nice, thanks. Two feature requests: backgrounds and shadows. Shadow can be done by repeating the path, and applying a feGaussianBlur.

jarek-foksa 8y ago

If you need a bit more advanced SVG editing functionality, check out my app Boxy SVG [1]. It allows you to easily define and manage an entire iconset in a single SVG file [2] (each icon can be placed in a separate <symbol> element). [1] https://boxy-svg.com https://boxy-svg.com [2] https://firebasestorage.googleapis.com/v0/b/boxy-svg.appspot.com/o/static%2Fpress-3.png?alt=media https://firebasestorage.googleapis.com/v0/b/boxy-svg.appspot...