I love Heroicons and have used them forever. I particularly liked that when used with inline_svg gem, you can set the width and color using css classes. Want a small icon? Use .w-4. Want it blue? .text-blue-500.

To get this to work, I used to copy the raw svg directly from the homepage and manually change the fill="none" in the parent <svg> tag to fill="currentColor" and remove the hard coded width and height.

In creating the html first rails boilerplate I wanted to add every icon so that anyone could use them easily. But it looks like the icons in the Github repo had the fills, widths, and heights hard coded, and had the outline icons in a separate folder, so I used the scripts below to get them working how I wanted

Remove hard coded sizes

for file in *.svg; do
    sed -i 's/width="24" height="24"//g' "$file"
done

Swap hard coded fills to reference currentColor

for file in *.svg; do     
  sed -i 's/#0F172A/currentColor/g' "$file"; 
done

Append "-outline" to all the files (do this in the outline directory before moving them all into a single directory)

for file in *.svg; do
    mv "$file" "${file%.svg}-outline.svg"
done

Now I have a single folder full of heroicons that can be styled and resized easily.