Fork me on GitHub


A set of beautiful svg social icons. Easily used in React. No images or external css dependencies.


Here are the available icons.


Detect URL

By default, pass the url of your social network, and the icon will be detected from the url.

<SocialIcon url="" />

Specify Network

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="" network="tumblr" />

Specify the Color

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" />

Specify the Label

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="" label="Our portfolio" />


The full code required to render.

var React = require('react');
var { SocialIcon } = require('react-social-icons');
React.render(<SocialIcon url="" />, document.body);

It scales!

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!