Tailwind heroicons are effectively illegible at reasonable screen DPI.

[jdmarshall]

stroke-width=1.5 makes for very wispy icons, and the solid ones, such as in the flash area are essentially indistinguishable from each other.

Despite some commentary in the heroicons github, it does not appear that the stroke-width is adjustible (and further does not work for the solid icons, as pictured below).

This image is from a phoenix app:

This image is from the heroicons homepage:

This is a pretty significant accessibility problem. I don't know if there's a good way to fix it short of switching vendors. Is this configurable?

[jdmarshall]

Even at 150% these are still fairly muddy.

I was experimenting with adding status indicators to an application I'm working on. These are too muddy to see clearly even when peering at the monitor. They will not function at all for establishing a gestalt of visual data. Compared to fontawesome (last row) which is still a little whispy, but better:

[josevalim]

For what is worth, it is easy to replace icons provider. For example, to use remix icons, add to your mix.exs:

      {:remixicons,
       github: "Remix-Design/RemixIcon",
       sparse: "icons",
       tag: "v4.6.0",
       app: false,
       compile: false,
       depth: 1},

Replace vendor/heroicons.js by vendor/remix.icons:

const plugin = require("tailwindcss/plugin")
const fs = require("fs")
const path = require("path")

module.exports = plugin(function({matchComponents, theme}) {
  let baseDir = path.join(__dirname, "../../deps/remixicons/icons");
  let values = {};
  let icons = fs
    .readdirSync(baseDir, { withFileTypes: true })
    .filter((dirent) => dirent.isDirectory())
    .map((dirent) => dirent.name);

  icons.forEach((dir) => {
    fs.readdirSync(path.join(baseDir, dir)).map((file) => {
      let name = path.basename(file, ".svg");
      values[name] = { name, fullPath: path.join(baseDir, dir, file) };
    });
  });

  matchComponents(
    {
      ri: ({ name, fullPath }) => {
        let content = fs
          .readFileSync(fullPath)
          .toString()
          .replace(/\r?\n|\r/g, "");

        return {
          [`--ri-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
          "-webkit-mask": `var(--ri-${name})`,
          mask: `var(--ri-${name})`,
          "background-color": "currentColor",
          "vertical-align": "middle",
          display: "inline-block",
          width: theme("spacing.10"),
          height: theme("spacing.10"),
        };
      },
    },
    { values },
  );
})

and then change your core components icon to match on ri- instead:

  @doc """
  Renders a [Remix Icon](https://remixicon.com).

  Icons come in two styles – outline and filled.
  By default, the outline style is used, but fill may
  be applied by using the `-fill`.

  You can customize the size and colors of the icons by
  setting width, height, and background color classes.

  ## Examples

      <.icon name="ri-github-fill" />
      <.icon name="ri-github" class="ml-1 w-3 h-3 animate-spin" />
  """
  attr :name, :string, required: true
  attr :class, :string, default: "size-5"

  def icon(%{name: "ri-" <> _} = assigns) do
    ~H"""
    <i class={[@name, @class]} aria-hidden="true"></i>
    """
  end

and finally replace your icons to use the remix version.

My suggestions for now are:

1. Use outline version of heroicons in new projects
2. Add a section for Alternative icons to our Assets management guide, quoting the instructions above

WDYT @SteffenDE ?

[SteffenDE]

I don't really see a difference between the solid and outlined icons, so not sure that really helps?

Thumbs up for adding instructions for alternatives!

fwiw I also had a Tailwind plugin for Google's Material Symbols at my previous work. If anyone's interested in that, I can see if I can get that code somehow. The interesting part about it was that due to the unreasonable amount of icons and variations, the simple "clone repo" approach was not really feasible. Instead, we lazily downloaded used icons in the plugin and stored only the icons that are actually used in the repo, allowing to use any material symbol without bloating the repo, for example <.icon name="symbol-[add-fill-gradeN25-20px] />

[josevalim]

Another option is to use another icon from heroicons for this. "no-symbol" could be use for errors, "check" could be used for info. Thoughts @jdmarshall?

Generally speaking, since we ship with Tailwind, I would prefer to stick with their official icon library.

[jdmarshall]

I have a suspicion that the hero icons made a bad decision when they upgraded their source material. I found where they reduced the stroke width for the default “optimized” from 2 to 1.5 and i think that’s what’s made them so wispy.

If we had our own builder for these we could fix a lot of the outline icons. Though when I fiddled with them things like the circle with three dots, the dots didn’t increase enough for my liking. It was better, but not great. Not enough for me to use them in lists or toolbars. For icons in proximity they have to be really visually distinct and I don’t think heroicons will ever reach that bar. They’re just too bland.

The solid icons are just a mess that stroke-width cannot fix. There are several comments in their issues and elsewhere on the internet that stroke-width does nothing for the solid ones. Which is a shame, and a number of people have told them that is weird.

I think short of abandoning tailwind (which would not make me sad at all but a lot of people are fine with), maybe using the outline icons for the flash would be easier to read.

I don’t know what it takes to build an equivalent of the react integrations in order to update the stroke width. Or that is to say, if it has to be part of tailwind to work or external is fine.

Since I filed this I hit up my friend and former coworker who did some really chunky icons for a project we worked on together. He told me that he never has time to make icons anymore. Things are a bit dire out there unless you’re willing to pay (eg some of the fontawesome premium packs are pretty strong)

[josevalim]

We are currently using the "mini" versions, but I assume it exhibits the same issues and concerns you have about "solid"?

[jdmarshall]

The mini versions are worse for sure, but the big ones still won’t be legible over someone’s shoulder, on a weird DPI interpolation level that differs from the native resolution, or for sure not projected on a wall. It’s not just whether you can tell what it’s supposed to be, it’s whether you can discern between three icons that mean different things.

When card games do icons right, the shape of the icon and the color mean the same things, so color blind people and people with bifocals can still make out what type of card they are peering at. When they do them wrong they make red and green icons not visually distinct enough.

After a little more thought, I think it might be worthwhile to have a few svg icons for the few that come from the generators, at least enough to cover the —no-tailwind flag. There’s the circled exclamation and the triangle one for errors, is that right? Even I could probably draw those better. Not sure about the solid version, but a beefier outline would work just as well I think.