A set of beautiful svg social icons. Easily used in React. No images or external css dependencies.
Here are the available icons.
By default, pass the url
of your social network, and the icon will be detected from the url.
<SocialIcon url="https://linkedin.com/in/couetilc" />
If you have a need to specify the network, you can. If you don't specify a url, your href
attribute will be omitted. You can include props for both url
and network
. The network
prop takes precedence.
<SocialIcon url="https://react-social-icons.com" network="tumblr" />
You can override the background fill color associated with the network with the bgColor
prop.
<SocialIcon network="twitter" bgColor="#ff5a01" />
You can fill the usually-transparent icon color with the fgColor
prop.
<SocialIcon network="twitter" fgColor="#ff5a01" />
By default, the SocialIcon
will use the name of a social network as an icon's accessible label. If you think the social network name is not enough context, you can pass in the label
prop.
<SocialIcon url="https://www.example.com" label="Our portfolio" />
Witness the beautiful SVG in action.
Note: this library injects on-page style
tags into the head
. This is great because you don't have to import any additional stylesheet to support this library. But more specificity in selectors will be required when overriding default styles from external stylesheets.
<SocialIcon network="pinterest" style={{ height: 25, width: 25 }} />
<SocialIcon network="pinterest" style={{ height: 50, width: 50 }} />
<SocialIcon network="pinterest" style={{ height: 100, width: 100 }} />
<SocialIcon network="pinterest" style={{ height: 200, width: 200 }} />
If you're interested in adding additional networks or helping make the library better, fork it on github and let the code fly!