Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.
import React from 'react' import { IconCircle } from '../../' const IconCircleDefault = (props) => { return ( <div> <IconCircle icon="rocket" size="md" {...props} /> </div> ) } export default IconCircleDefault
import React from 'react' import { IconCircle } from '../..' const IconCircleSizes = (props) => { return ( <div> <IconCircle icon="rocket" size="sm" {...props} /> <br /> <IconCircle icon="rocket" size="md" {...props} /> <br /> <IconCircle icon="rocket" size="lg" {...props} /> <br /> <IconCircle icon="rocket" size="xl" {...props} /> </div> ) } export default IconCircleSizes
import React from 'react' import { IconCircle } from '../../' const IconCircleColor = (props) => { return ( <div> <IconCircle icon="rocket" size="sm" variant="royal" {...props} /> <br /> <IconCircle icon="rocket" size="sm" variant="blue" {...props} /> <br /> <IconCircle icon="rocket" size="sm" variant="purple" {...props} /> <br /> <IconCircle icon="rocket" size="sm" variant="teal" {...props} /> <br /> <IconCircle icon="rocket" size="sm" variant="red" {...props} /> <br /> <IconCircle icon="rocket" size="sm" variant="yellow" {...props} /> <br /> <IconCircle icon="rocket" size="sm" variant="green" {...props} /> </div> ) } export default IconCircleColor
Be careful of use cases where Icon Circle Button may need to be used instead.