Some icons have incorrect outlines and have background fills

[trafnar]

I put the svg "outline" style icons against a dark background and used CSS to override the fill property of the paths, this led me to discover some issues.

I believe icons should look like this (on my dark background with red fill color):

but some look like this, which means they weren't correctly converted to outlines:

Several others have white backgrounds in the SVG

Last, these two blister pill icons have some issues:

I would be happy to fix these but I think it has to happen on the Figma file so that future exports are correct. I've requested access to the file on Figma

[trafnar]

One other, this oral contraceptive icon has an issue:

[trafnar]

Here's a list of all the icons I've found with issues (I've only checked the 'outline' style)

Misc

• Oral Contraceptive 28 (fill only affects outer edge)
• Blister Pills Round x16 (altering fill color replaces entire icon)
• Blister Pills Round x14 (uses opacity effects)
• Rural Clinic (opacity issue)

Contains non-outlined strokes:

• Network Low Bars
• Exam
• Animal Donkey
• Warning
• Social Distancing
• Activity Run (head is correct, body is not)

has white background shape:

• Wheelchair
• Ventilator
• Quarantine Home
• Calendar Quarantine
• Social Distancing ALT
• Intestinal Pain
• Shield Virus
• Syringe Vaccine
• Virus ALT
• Patient Virus
• Global Pandemic
• Globe
• Chart Cured Decreasing
• Chart Cured Increasing
• Chart Death Rate Decreasing
• Chart Death Rate Increasing
• Chart Death Rate Stable
• Chart Infected Decreasing
• Chart Infected Increasing
• Chart Infected Stable
• Virus Mutation
• Dental Hygiene
• PPE Sanitizer ALT
• Nose
• Loss of Smell
• Viral Lung Infection
• PPE Face Shield ALT
• PPE Virus Sanitizer Spray
• Virus Research ALT
• Virus Research
• Virus Lab Research
• Virus Lab Research ALT
• Liver ALT

[trafnar]

I made an app that displays all the SVG icons with customizable fill and stroke colors, this helps to discover icons with problems easily: https://priceless-fermi-4bf406.netlify.app/

[hawkeye64]

I found similar, like this one: https://github.com/resolvetosavelives/healthicons/blob/main/public/icons/svg/negative/emotions/nervous.svg

The issues are exasperated when viewed in "dark" mode. Then you get icons looking like this:

[hawkeye64]

This seems to be fixed. I will create a separate ticket for (negative) "nervous" icon (all paths have the same color)

[trafnar]

This seems to be fixed

When I looked at the Figma file, they seem to be correct there, is that what you mean? Or have they already been updated in the export by someone?

[hawkeye64]

The actual files were updated. This issue should be closed (as well as others). Unfortunately, this repo doesn't do releases, so I am using it as a git submodule. Another issue I opened has not yet been fixed: https://github.com/resolvetosavelives/healthicons/issues/151 Unfortunately, it has the wrong tag and I cannot remove it.

[nburka]

OMG - this is such an old issue. Sorry everyone! The colors have been normalized for a while, but we've now also updated them to be much easier to override the colors using the currentColor CSS feature. We've also removed white backgrounds to make them transparent.

You can now do this:

svg {
 background: #123abc;
 color: #abc123;
}

Thanks @troccoli for brining it to our attention!