Show HN: ICONSVG – Customize and Generate Common SVG Icons | Hacker News Reader

Show HN: ICONSVG – Customize and Generate Common SVG Icons

iconsvg.xyz

227 pointsgaddafirusli34 comments

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 )

Cool stuff! Thanks for making it and sharing :)

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

Or just inherit colour that was set for text.

    path { stroke: currentColor; }

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

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

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

Very cool! Thanks!

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.

Brilliant. I am the most picky person ever when it comes to SVG and I detest the rubbish that gets churned out of Illustrator. The great thing about your tool is that it enables you to learn a thing or two, there is a great amount of SVG vocabulary used. My test is to see if an icon such as the 'play' icon uses a circle or a path for the circle.

Another thing that I find annoying about designer made SVGs is that the circle will not only be a path but the points on the path will be in 'NASA numbers', i.e. to nine decimal places. It is refreshing to find icons on a sensible grid and going for integers where possible.

Download size is one thing, however, I also think SVG icons should be a bit more literal, with things like mask and use brought into play. So the 'fast forward' icon might be lighter defined as two polygons, but the polygons are the same so the define one triangle and re-use it for the second makes more sense in a literal way even though the code to bring in the namespace for use might actually make the download size of the icon larger.

In this vein the other thing I like to see is a viewbox that has the origin in the middle. In that way a circle just has to have a radius to be centred and an arrow can use another arrow and be rotated by 180 degrees.

If you put this together then you can have a symbol set that has eight different arrows in it 'using' the base arrow and any changes to the base arrow get automagically updated to the others.

Another download option that would be useful to me would be a CSS variable version of each icon. This technique doesn't work in Edge but has its advantages in that you can have pseudo elements for things like 'external link' where the background to the pseudo element is an SVG in a CSS variable. The CSS variable needs some url-data-xml-type-svg syntax and any '#' characters have to be escaped out as %23.

By taking this approach the SVGs can be in the stylesheet and therefore downloaded 'for free'. If done in white they can also be colorised to anything including black in the CSS for the pseudo element. Lea Verou has done a talk or two on this SVG in CSS approach and a tool to get readymades would help make this method more acceptable to people who are still stuffing icons in fonts.

Anyway, thanks again for sharing your beautiful site, there is lots to learn from the icons you have there!

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

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

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

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.

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

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

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?

The icons are available for free - for personal and commercial use. I have no plan to open source the tool, for now :)

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

The about link in the top menu of the page has some information, although not what you are asking for.

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

[2] https://firebasestorage.googleapis.com/v0/b/boxy-svg.appspot...

Getting this when I visit:

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

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

fwiw, same here. OpenDNS blocking the site.

I'm not sure if I can do anything about this. Any suggestions?

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

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!

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

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

These are nice, thanks.

Two feature requests: backgrounds and shadows.

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

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

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

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

Just added them in for you :)

Awesome! Thank you.

Reply on news.ycombinator.com