Using font awesome pro with semantic-ui

Semantic UI has CSS compiled for the basic Font Awesome. That doesn't mean you are prevented from using whatever you want though. However, the name prop on Semantic UI React's Icon component is only going to help you validate for icon names in the free set.

In this case, the way you may want to go is just to include all of the styles that come with Font Awesome's Pro set in your project instead. You can still use SUIR's Icon component but you would define your icon classes with the className prop instead.

Take a look at Font Awesome's basic use docs.

Once you include your pro fonts and css in your project's build process (whatever that is) then you should be able to do this: <Icon className='far fa-stroopwafel' />