snippetreactModerate

How to display svg icons(.svg files) in UI using React Component?

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

iconssvgreactusingfileshowcomponentdisplay

Problem

I have seen a lot of libraries for svg on react but none gave me how to import an svg file in the react component. I have seen code which talk about bring the svg code into react rather than using the .svg icon as image and show it in the UI.

Please let me know if there are ways to embed the icon.

Solution

You can directly use .svg extension with img tag if the image is remotely hosted.

ReactDOM.render(
  ,
  document.getElementById('root')
);

Here is the fiddle: http://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110

Note: If you are using any web app bundlers (like Webpack) you need to have related file loader.

Code Snippets

ReactDOM.render(
  <img src={"http://s.cdpn.io/3/kiwi.svg"}/>,
  document.getElementById('root')
);

Context

Stack Overflow Q#42296499, score: 38

Revisions (0)

No revisions yet.