Different grid sizes. How to best mix and match with other icon libraries?

[jvolker]

I’m working on integrating Health icons with Lucide icons. After reading the note on the Health icons website, I learned that Health icons are said to pair well with Feather icons (which Lucide is based on) and Remix icons.

The icon sets do share a similar design language. However, there is a fundamental difference: Lucide, Feather, and Remix icons are all designed on a 24x24px grid, while Health icons are based on a 48x48px grid. The larger grid of Health icons is probably due to the more complex visual information they need to convey, which makes sense.

This grid difference presents challenges though, even when adjusting stroke widths and sizes. As shown below:

Despite these adjustments, there’s still a noticeable difference in density. This makes me think Health icons might be less suitable for smaller sizes compared to other icon sets, which are typically designed with small-scale use in mind, especially for UI design.

Now, I’m curious if there are other icon sets that might be a better match for Health icons? (Though I do appreciate the flexible stroke-width when developing code using Lucide.) How would you approach this challenge? Would it be helpful to create a usage guide similar to the Lucide accessibility guide, showing how the icons are intended to be used and specifically addressing the nuances of using different icons sets together?

Thank you so much for creating this project! :)

[dburka]

You raise a really valid point. When we started Health Icons, we were aiming for a visual match, as you indicated in your message. We did not design at the same grid exactly for the reason that you wrote: we needed to handle more visual complexity in many of the early icons. We also were replacing icons originally for the DHIS2.org open source project and their icons were designed on a larger grid.

We did start a new project within Health Icons to recreate many of the icons on a 24px grid. The project has slowed a bit but we could make more! You can grab any of the completed icons directly from our Figma by exporting them. Please let us know which icons you need and we might be able to task volunteers with creating more 24px icons. https://www.figma.com/design/mbsBVYXECIOl5E0kkGAiC2/Healthicons.org-(Open-Source)?node-id=1250-133

[jvolker]

Thanks so much for your reply. Amazing, you've already thought about this and started work on it!

I realized, in some cases, it might actually be an option to use the filled version of the 48px version for smaller scale.

This is a list with the icons I am currently looking at. Some of them are already available in Health icons. And for others, I have found alternatives in other libraries.

health icon name	24px version available at
hospitalized
male + female	Tabler
virus	Tabler
heart	Lucide / Tabler
lungs	Health icons
cardiogram	Health icons

I'm not sure if this is an option, but maybe it would be possible to copy some of the 24px versions or at least take some inspiration: https://tabler.io/icons using MIT license https://lucide.dev/ using ISC/MIT license

[dburka]

We could definitely take inspiration. It's a good idea.

There are also quite a few icons in the Material collection from Google for health-related iconography, if helpful for your project. https://fonts.google.com/icons?icon.query=health

[jvolker]

This is great as an option, thank you. I've got to say, I prefer the design of "Health icons", though. :)

[dburka]

Would something like this Hospitalized icon work for you?https://www.figma.com/design/mbsBVYXECIOl5E0kkGAiC2/Healthicons.org-(Open-Source)?node-id=9743-26433&t=XpAN2VCdZfqXIPzj-4

[jvolker]

This looks great, thank you very much.