feather VS svgomg

Feather Icons

Feather - A collection of simply beautiful open source icons with an emphasis on simplicity, consistency and readability.

In this article, we’ll walk you through using Feather-inspired animated icon libraries in React applications and guide you through setting up a React project, adding and customizing icons using various libraries, and handling common issues like double rendering.

Feather – Simply beautiful open source icons (feathericons.com)

Select the Icon Theme. Blueprint is the default for Roam Research. Roam Studio provides Feather Icons.

Feather icons

As for the icons, grab 'em at Feather or SVGRepo

Icons: Feather and SVGRepo Wallpaper: Backdrops Slideshow (showcased) images: Various sources. (comment down below so that I can track 'em down)

Icons (references): https://feathericons.com/ | https://svgrepo.com/ Wallpaper: Backdrops Slideshow (showcased) images: Various sources (Mostly from Pinterest and Twitter)

Im assuming if you click on the red dot you get to see the names. Try to get a svg without the names. Get it through SVGOMG https://jakearchibald.github.io/svgomg/ and then make a component out of it. Add click listener to the dots and voila

SVG Optimizer

SVGOMG for optimizing SVG

Use https://jakearchibald.github.io/svgomg/ to strip out all the unnecessary data.

I came here to say the same thing.

Somebody recently pointed me at a nice online GUI for svgo, so you can try it for yourself without installing anything: https://jakearchibald.github.io/svgomg/

Use what ever you to create it the run it through https://jakearchibald.github.io/svgomg/

In addition to the good points others have posted, you could also try using the SVGOMG tool to reduce the final size.