stnrd / healthicons

React & React Native wrappers for Health Icons

Introducing our new React and React Native Icon Wrapper package for Health Icons ! This package provides a simple and easy-to-use interface for accessing all the health icons within your React or React Native projects. This package is perfect for any health-related application and will save you time and effort in creating and maintaining your application's iconography.

Browse at healthicons.org →

React

A React library is available to install under the name healthicons-react. For more details, see the package README.

React Native

A React Native library is available to install under the name healthicons-react-native. For more details, see the package README.

CSS

Import the CSS File:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/stnrd/healthicons@main/css/healthicons.css"
/>

Here is an example in HTML:

<i class="healthicons-filled-blood-bag"></i>

The class must always be "healthicons-" following by the icon type(filled, outline, negative). You can find the names of the icons here.

The icons are set to be displayed as inline-block and will use the current font size as their default. To modify this behavior, you can make changes to the ::before styles of the element where the icons are applied as a mask.

Health Icons

I would like to extend my gratitude to the creators and contributors of the Health Icons for their hard work in releasing such a comprehensive collection of icons for use in healthcare related projects.

License

MIT License

healthicons's Issues

Set component props doesn't allow set the color

The documentation explain that it is possible to change standard SVG properties:

https://github.com/stnrd/healthicons/tree/main/packages/healthicons-react

That is true, but set color or fill doesn't change the icon color. That is because the path element inside the SVG already contains a fill attribute set to "#000". I have had to use styled components to overwrite that property.

Name of '!' icon should be ExclamationMark not ExplanationMark

I found the name for exclamation mark icon is ExplanationMark. I guess it is a typo.
It is set as explanation-mark in:

https://github.com/stnrd/healthicons/blob/main/constants.js

import *

Thank you for doing this!
I would like to allow my users to search for an icon in the UI. This means that I would like to import the metadata that you provide, as well as every single icon, so they are readily available. Is this possible today in a way that I am just missing?

Missing icons

Hi,

I haven't been able to find the components for the next icons:

people/diabetes
people/speech_language_therapy
specialties/pharmacy
conditions/sweating
devices/fever
devices/eyeglasses

I guess it is because there are other icons with the same component name, so the components for those icons overwrite the components of the previous ones.

For example, devices/fever and emotion/fever use the same component name. Another example es people/diabetes and device/diabetes