react-social-icons

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

Library

Here are the available icons.

Usage

Single Icon

Detect URL

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

<SocialIcon url="http://linkedin.com/in/jaketrent" />

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="http://jaketrent.com" network="tumblr" />

Specify the Color

You can override the fill color associated with the network with the color prop.

<SocialIcon network="twitter" color="#ff5a01" />

Render

The full code required to render.

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

Multiple Icons

As a convenience api for rendering a collection of icons, <SocialIcons /> is provided.

Detect from URLs

You can easily render a set of social icons from an array of urls. Notice: the default icon is displayed for the url (jaketrent.com) that is from an unsupported network.

var urls = [
  'http://jaketrent.com',
  'http://twitter.com/jaketrent',
  'http://linkedin.com/in/jaketrent',
  'http://www.pinterest.com/jaketrent/artsy-fartsy/'
];
<SocialIcons urls={urls} />

Specify all the Colors

Or set a uniform color across your icons. Look at that nice, tight set of icons!

<SocialIcons urls={urls} color="black" />

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

Feedback

If you're interested in adding additional networks or helping make the library better, fork it on github and let the code fly!