Install package React-icons package can be installed with npm i react-icons from terminal Whole set of icons can be checked here Usage We can use icons as JSX components <Icon /> or assign them to variables const iconVar = React.createElement(Icon) Styles can be applied on svg <Icon style={styles}/>
import { FaRedhat } from 'react-icons/fa'
import { FaRedhat as HatIcon } from 'react-icons/fa'
const icon = React.createElement(HatIcon)
const styles = { verticalAlign: 'middle', fill: 'red', fontSize: '100px', width: '100px', height: 'auto', margin: '3px', color: 'blue', opacity: '.5', strokeWidth: '10px' }
function Component() {
return (
<>
<FaRedhat />
<HatIcon />
{icon}
<HatIcon style={styles}/>
<span className='rotate'>
<FaRedhat />
<style jsx>{`
.rotate :global(svg) {
color: blue;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes spin {
100% { transform:rotate(360deg); }
}
`}</style>
</span>
</>
)
}
Search for icons All available icons are presented here To import an icon you need to know exact package name import { FaRedhat } from 'react-icons/fa' - /fa in this example When you search for an icons via search input, it is not obvious what the package icon comes from Better to go manually through packages on the left side and manually look for an icon