Using Ant Design’s Icons in Your React App

My favourite React UI library is ant.design. The components are of high quality and flexibility. However I’ve noticed that if you are not familiar with this library, trying to use some of their components can take a while to figure out.

Especially the Icons.

So this is how you can use Ant Designs Icons in your react application.

First: Install the library.

Then install:

Once this is installed successfully, you’ll have access to the library icons

On the library documentation, you can find the list of applications available to you here. You can find icons in three categories, outlined, filled and two-toned.
You select an Icon you wish to use copy and include it in your code but you need to also import the icons into code where you want to use it.
you can import the code by using this(the icon is within the curly braces):

you can now use this icon as a component changing the styling as you wish, here is an example of how I’ve use it:

The library’s documentation provides information on properties that you can use with the icons and is easy to read and understand.

Hope you found this article useful!