I have black & white stylized icons in PNG format. See image.
I would like to be able to use CSS to style the icons to update icon color or add an interior drop shadow or some thing cool, like what you can do with font awesome icons
I assume i need to somehow convert these ore create my own icons. Any tips on how to do that?
Even just making them transparent would be a big improvement. I don’t have photoshop, but I assume there are other tools or online tools that could do that?
You can do this with css and jquery
You can try a png to vector converter. But the .pngs will have to be bigger in size than what you have posted. You can also post the .pngs here and maybe I can do a trace.
Here is a fairly poor trace out of Illustrator based on the image you posted. I didn’t really bother making any corrections to it as the image is just too small to get a good trace.
Can you elaborate on this suggestion?
Those are really good, and seem totally suitable for what I’m doing at the moment. Thanks for your help. Could you tell me if you had to do additional work after the tracing? Did Photoshop produce the path information ?
Photoshop doesn’t produce vectors, you would use a vector drawing program (eg Illustrator, Inkscape, Sketch, Affinity Designer). Here is a list of browser-based vector editors:Best free Adobe Illustrator alternative of 2023 | TechRadar
The services that automatically trace images and convert them to vectors should deal fine with those icons because they’re very simple, but a lasjorg says the images you use for the source of the tracing need to be much bigger.
You cannot, it’s not possible.
I just had to remove the letter paths and do a tiny bit of fixing on some paths but again that is mainly just because the source image was so small.
The Image Trace in Illustrator is pretty good at working with that type of image so it did a decent job even with such a small image.
You can export out of Illustrator and get the SVG code.
Something I didn’t realise until recently, and it’s amazing: you can drag out of illustrator and get the source code: as in select the paths, drag them into a text editor, and abracadabra, there’s the SVG source code.
That is pretty nice. I can’t really get the drag and drop to work but you can select the paths, copy them, and then just paste them into a text file. The drag and drop issue might have something to do with the OS and or Illustrator version, not sure. Anyway, copy and pasting is still fast.
It could possibly just be on the much newer versions, I just found out by accident a few months ago. Might have to be saved as SVG rather than .ai as well
Might be.
I know drag and drop sometimes is a bit problematic on Windows. I think you are supposed to be able to drag from one Adobe app to another but that never really seemed to work for me.