Skip to content
This repository has been archived by the owner on Apr 5, 2022. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Component for Icons using Inline SVG

React supports several SVG elements which means you can embed your icon code directly into a component. Inline SVG has good browser support and by using it you can save HTTP requests, icons are still cachable and you can control them using CSS.

Here's a very simple implementation of an Icon component with 2 icons:

  propTypes: {
    icon: React.PropTypes.string.isRequired,
    size: React.PropTypes.oneOfType([
    style: React.PropTypes.object
  getDefaultProps() {
    return {
      size: 24
  _mergeStyles(...args) {
    // This is the m function from "CSS in JS" and can be extracted to a mixin
    return Object.assign({}, ...args);
  renderGraphic() {
    switch (this.props.icon) {
      case 'my-icon':
        return (
          <g><path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z"/></g>
      case 'another-icon':
        return (
          <g><path d="M7.41 15.41l4.59-4.58 4.59 4.58 1.41-1.41-6-6-6 6z"/></g>
      // Add more icons here
  render() {
    let styles = {
      fill: "currentcolor",
      verticalAlign: "middle",
      width: this.props.size, // CSS instead of the width attr to support non-pixel units
      height: this.props.size // Prevents scaling issue in IE
    return (
      <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fit
 // This lets the parent pass custom styles

This component can be later used like this:

<Icon size="2rem" icon="my-icon" />

JSX supports multiline strings, so you can add line breaks to the d attribute safely.
For an IconButton component check out the source.

I found this useful in several situations, but it is not the right solution for every project. For example, if you have an isomorphic app with a list of 100 items, each one with the same icon, you probably don't want the same SVG code repeated 100 times in the HTML served. Another thing to take in mind is that React adds a data-reactid attribute, which are standard in regular HTML5 markup but not for SVG elements (however, as far as I know, this has no practical consequences).

Icon Set

Browse a collection of optimized SVG icons created by the Polymer Team.


React Component for Icons using Inline SVG






No releases published


No packages published