
Show HN: ICONSVG – Customize and Generate Common SVG Icons - gaddafirusli
https://iconsvg.xyz/
======
gaddafirusli
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 )

~~~
megous
You can customize whatever you like by using var(--color, #000) in SVG and
--color: #123 in CSS. No need for any tools. :)

~~~
jakelazaroff
Only if you're including the markup inline as opposed to as an image, which
may or may not be desirable!

~~~
megous
Yes, you need at least xlink to an external SVG file. But that's pretty close
to <img>. It's just one more element.

------
33degrees
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-a...](https://uxmovement.com/mobile/solid-vs-outline-
icons-which-are-faster-to-recognize/>)

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

------
jedimastert
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

------
nestorherre
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
Thanks! That's the goal of this project. Let me know if there's more that can
be done.

------
myfonj
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.)

------
m1el
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
The icons are available for free - for personal and commercial use. I have no
plan to open source the tool, for now :)

~~~
souenzzo
I was looking for the sources I think that it could be JSX, hiccup and others
output support

------
jarek-foksa
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...](https://firebasestorage.googleapis.com/v0/b/boxy-
svg.appspot.com/o/static%2Fpress-3.png?alt=media)

------
css
Getting this when I visit:

> This site is blocked due to a security threat that was discovered by the
> Cisco Umbrella security researchers.

~~~
limejuice
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."

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

------
jypepin
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!

------
Yabood
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/).

------
franky47
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

------
robbrown451
These are nice, thanks.

Two feature requests: backgrounds and shadows.

Shadow can be done by repeating the path, and applying a feGaussianBlur.

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

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

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

~~~
gaddafirusli
Just added them in for you :)

~~~
huntermeyer
Awesome! Thank you.

