IconCircle
One way to make low fidelity icons look a bit more "designed" is to simply put them in a circle. That's exactly what this component does.
The main use case for this pattern is on informational pages with lots of text where the icon is supplementary to a paragraph of text.
It is not meant to be used as or as part of an interactive UI element like a button or a link.
Usage
Wrap this component around any arbitrary icon component of your choice:
import IconCircle from "@finanzchef24gmbh/design-system/dist/src/Icons/IconCircle";
<IconCircle color="brand">
<DownloadIcon color="brand" scale="huge" />
</IconCircle>;
Priority
| Demo | Icon Priority |
|---|---|
| primary | |
| secondary |
Color
Just like in the Icon component to make the icon and the circle around it look alike.
| Demo | Icon Priority |
|---|---|
| brand | |
| accent |
All Icons
AccountCircleIcon
AccountIcon
AddCircleBoldIcon
BinIcon
BriefcaseIcon
BulbIcon
CalendarIcon
CancelIcon
CancellationRightIcon
Check1Icon
CheckCircleIcon
CheckShieldIcon
ChevronBottomIcon
ChevronLeftIcon
ChevronRightIcon
ChevronTopIcon
CloseCircleIcon
CloseIcon
CloudUploadIcon
CogLightIcon
CogIcon
CrownIcon
CursorIcon
DesktopComputerIcon
DocumentsIcon
DownloadIcon
EnvelopeIcon
ExpandIcon
FeedbackIcon
FileDocIcon
FolderFileIcon
FoodDeliveryCarIcon
HeyDataSealIcon
HomeIcon
HouseIcon
InfoIcon
InformationCircleIcon
JusticeIcon
KeyboardArrowLeftIcon
KeyboardArrowReturnIcon
KeyboardArrowRightBoldIcon
KeyboardArrowRightIcon
LockIcon
LoginIcon
LogoIcon
LogoutIcon
MessagesBubbleTextAlternateIcon
MinimizeIcon
MultiPersonsThinOutlineIcon
MultiplePersonsIcon
NavigationMenuIcon
NewIcon
NumberOneSealIcon
OvernightStayIcon
PartyPopperIcon
PencilBoldIcon
PencilIcon
PhoneCallbackIcon
PhoneCircleIcon
PhoneIcon
PlusOneIcon
PlusIcon
PoliceIcon
QuestionCircleIcon
RatingNegativeIcon
RatingNeutralIcon
RatingPositiveIcon
RealEstateIcon
SalonIcon
Search1Icon
SinglePersonThinOutlineIcon
SinglePersonIcon
StarOutlineIcon
StarIcon
StepOneIcon
StepThreeIcon
StepTwoIcon
StoreIcon
SubtractCircleBoldIcon
TransportOutlineIcon
TransportIcon
UserSecurityIcon
VideoIcon
WarehouseIcon
WarningIcon
WorkDeskIcon