I know that Remixicon does not have every icon you may need, and when you are working with a design system, you may be provided with some custom icons.īut the idea shared here is something you can try with any library you're working with. If you use a non-square-shaped icon, you will have to specifically provide the width and height prop to change both attributes accordingly. And now I can use the component like this: Size = 18, // or any default size of your choiceĬolor = 'black' // or any color of your choice Here is the updated component: import React from 'react' Then I'll add an extra property, fill, which I will use for the color prop. I'll use the size prop to modify the value of width and height. The svg element has four properties: xmlns, viewBox, width and height.

I'll add two props to modify this component: size and color. Then I paste the SVG into a file, say, home-line.js with the following code: import React from 'react'Īs it is, it uses the default color and size that comes from Remixicon. So better to leave it black, which is the default color of SVGs. If you choose a different color, it may conflict with the specified colors you provide later. On Remixicon, I select an icon of my choice, select size 18px, and select Copy SVG. So follow along even if you don't use Remixicon :) I applied the solution shared in this step, and it also worked for most icons. That being said, I have worked with a client in the past who created custom icons on Figma. I haven't tried out other icon libraries yet, so the steps in this article may or may not apply if you use a different library. I usually download the icons I use from Remixicon. In this article, I will show you how I currently go about creating customizable SVG icons as React components. SVGs, on the other hand, have better quality regardless of size and the colors are customizable even after downloading.īut you may agree with me that SVGs can be a pain when it comes to customizability. In some cases this alters the image's quality. PNGs come with a fixed color but allow dimension changes (like a regular image). When it comes to icons, you can use PNG or SVG images. Here's how to create a reusable React component for icons. We use icons when building frontend applications all the time – for indications, pointers, and so on.

User icon svg code