Icon
SVGs converted to React components.
Examples
Default
Components exist for each icon. Import the icon component and use it as you would any other React component.
import { WrinklesIcon } from '@curology/ui-components-web/react/Icon/icons/WrinklesIcon';
<WrinklesIcon />
Dynamic Import
warning
Using the DynamicIcon component is discouraged as it makes tree-shaking unused icons difficult and will greatly increase bundle size. Prefer directly importing icon components as shown above.
import { DynamicIcon } from '@curology/ui-components-web/react/DynamicIcon';
<DynamicIcon name="wrinkles" />
Icon Sizes
There are six sizes available for an Icon.
import { CurologyLogoStickerIcon } from '@curology/ui-components-web/react/Icon/icons/CurologyLogoStickerIcon';
<CurologyLogoStickerIcon
size="{IconSize|sm|md(default)|lg|xl|xxl}"
/>
Arbitrary Icons
For one-off icons that won't be shared across applications (and therefore shouldn't be added to Squeeze), the <Icon /> component has the ability to accept an image. This provides sizing consistency for all icons, regardless of whether or not they're officially part of Squeeze.
import { Icon } from '@curology/ui-components-web/react/Icon';
import SomeSVG from './some-svg.svg';
<Icon image={SomeSVG} />
<Icon image={<SomeSVG />} />
<Icon image={<img src="data:image/svg+xml;base64,..." />} />
Available Icons
| Icon | Component | Name (Deprecated) |
|---|---|---|
<AccordionCaretDownIcon /> | accordion-caret-down | |
<AccordionCaretUpIcon /> | accordion-caret-up | |
<AcneIcon /> | acne | |
<Acne1Icon /> | acne-1 | |
<Acne3Icon /> | acne-3 | |
<Acne5Icon /> | acne-5 | |
<Acne7Icon /> | acne-7 | |
<AgencyAcneIcon /> | agency-acne | |
<AgencyAcne1Icon /> | agency-acne-1 | |
<AgencyAcne3Icon /> | agency-acne-3 | |
<AgencyAcne5Icon /> | agency-acne-5 | |
<AgencyAcne7Icon /> | agency-acne-7 | |
<AgencyAlwaysIcon /> | agency-always | |
<AgencyAlwaysClockIcon /> | agency-always-clock | |
<AgencyAnxiousIcon /> | agency-anxious | |
<AgencyArrowLeftIcon /> | agency-arrow-left | |
<AgencyArrowRightIcon /> | agency-arrow-right | |
<AgencyAzelaicAcidIcon /> | agency-azelaic-acid | |
<AgencyBagIcon /> | agency-bag | |
<AgencyBellIcon /> | agency-bell | |
<AgencyCalendarIcon /> | agency-calendar | |
<AgencyCameraIcon /> | agency-camera | |
<AgencyChatBubbleIcon /> | agency-chat-bubble | |
<AgencyCheckBadgeIcon /> | agency-check-badge | |
<AgencyCheckmarkIcon /> | agency-checkmark | |
<AgencyChestIcon /> | agency-chest | |
<AgencyChevronIcon /> | agency-chevron | |
<AgencyCircleIcon /> | agency-circle | |
<AgencyCircleAddIcon /> | agency-circle-add | |
<AgencyCircleCheckmarkIcon /> | agency-circle-checkmark | |
<AgencyCircleRemoveIcon /> | agency-circle-remove | |
<AgencyCleanserIcon /> | agency-cleanser | |
<AgencyClipboardIcon /> | agency-clipboard | |
<AgencyClockIcon /> | agency-clock | |
<AgencyCloggedPoresIcon /> | agency-clogged-pores | |
<AgencyCloudIcon /> | agency-cloud | |
<AgencyCombinationIcon /> | agency-combination | |
<AgencyConfusedIcon /> | agency-confused | |
<AgencyConsultHistoryIcon /> | agency-consult-history | |
<AgencyCrossIcon /> | agency-cross | |
<AgencyDarkSpotsIcon /> | agency-dark-spots | |
<AgencyDownloadIcon /> | agency-download | |
<AgencyDropIcon /> | agency-drop | |
<AgencyDropperIcon /> | agency-dropper | |
<AgencyEditIcon /> | agency-edit | |
<AgencyElatedIcon /> | agency-elated | |
<AgencyEqualsIcon /> | agency-equals | |
<AgencyErrorIcon /> | agency-error | |
<AgencyEyeClosedIcon /> | agency-eye-closed | |
<AgencyFaceIcon /> | agency-face | |
<AgencyFemaleIcon /> | agency-female | |
<AgencyFinelinesIcon /> | agency-finelines | |
<AgencyFirmnessIcon /> | agency-firmness | |
<AgencyFirmnessFlagIcon /> | agency-firmness-flag | |
<AgencyFlagIcon /> | agency-flag | |
<AgencyFlagCanadaIcon /> | agency-flag-canada | |
<AgencyFlagUkIcon /> | agency-flag-uk | |
<AgencyFlagUsaIcon /> | agency-flag-usa | |
<AgencyFuriousIcon /> | agency-furious | |
<AgencyGiftIcon /> | agency-gift | |
<AgencyGlobeIcon /> | agency-globe | |
<AgencyGridIcon /> | agency-grid | |
<AgencyHeartIcon /> | agency-heart | |
<AgencyHeartCompleteIcon /> | agency-heart-complete | |
<AgencyHelpIcon /> | agency-help | |
<AgencyHomeIcon /> | agency-home | |
<AgencyHugIcon /> | agency-hug | |
<AgencyImageIcon /> | agency-image | |
<AgencyInfoIcon /> | agency-info | |
<AgencyLightningIcon /> | agency-lightning | |
<AgencyLocationIcon /> | agency-location | |
<AgencyLockIcon /> | agency-lock | |
<AgencyLogoIcon /> | agency-logo | |
<AgencyLogoLockupIcon /> | agency-logo-lockup | |
<AgencyLogoLockupInverseIcon /> | agency-logo-lockup-inverse | |
<AgencyLogoStickerIcon /> | agency-logo-sticker | |
<AgencyLogoStickerInverseIcon /> | agency-logo-sticker-inverse | |
<AgencyLogoWordmarkIcon /> | agency-logo-wordmark | |
<AgencyLogoutIcon /> | agency-logout | |
<AgencyLunchIcon /> | agency-lunch | |
<AgencyMailIcon /> | agency-mail | |
<AgencyMaleIcon /> | agency-male | |
<AgencyMelasmaIcon /> | agency-melasma | |
<AgencyMenuIcon /> | agency-menu | |
<AgencyMessageIcon /> | agency-message | |
<AgencyMicIcon /> | agency-mic | |
<AgencyMildIrritationIcon /> | agency-mild-irritation | |
<AgencyMinusIcon /> | agency-minus | |
<AgencyMixIngredientsIcon /> | agency-mix-ingredients | |
<AgencyMoisturizerIcon /> | agency-moisturizer | |
<AgencyMoreIcon /> | agency-more | |
<AgencyMortorIcon /> | agency-mortor | |
<AgencyMostOfTimeIcon /> | agency-most-of-time | |
<AgencyMostOfTimeClockIcon /> | agency-most-of-time-clock | |
<AgencyNeckIcon /> | agency-neck | |
<AgencyNeverIcon /> | agency-never | |
<AgencyNeverClockIcon /> | agency-never-clock | |
<AgencyNiacinamideIcon /> | agency-niacinamide | |
<AgencyNoMakeupIcon /> | agency-no-makeup | |
<AgencyNoneIcon /> | agency-none | |
<AgencyNoticeableIrritationIcon /> | agency-noticeable-irritation | |
<AgencyOftenDryIcon /> | agency-often-dry | |
<AgencyOftenOilyIcon /> | agency-often-oily | |
<AgencyOtherIcon /> | agency-other | |
<AgencyOverwhelmedIcon /> | agency-overwhelmed | |
<AgencyPackagingIcon /> | agency-packaging | |
<AgencyPalmTreeIcon /> | agency-palm-tree | |
<AgencyPaperclipIcon /> | agency-paperclip | |
<AgencyPauseIcon /> | agency-pause | |
<AgencyPaymentIcon /> | agency-payment | |
<AgencyPhoneIcon /> | agency-phone | |
<AgencyPlanIcon /> | agency-plan | |
<AgencyPlayIcon /> | agency-play | |
<AgencyPlusIcon /> | agency-plus | |
<AgencyPreparedIcon /> | agency-prepared | |
<AgencyProviderIcon /> | agency-provider | |
<AgencyRocketshipIcon /> | agency-rocketship | |
<AgencySatisfiedIcon /> | agency-satisfied | |
<AgencySearchIcon /> | agency-search | |
<AgencySelfiesIcon /> | agency-selfies | |
<AgencySettingsIcon /> | agency-settings | |
<AgencySevereIrritationIcon /> | agency-severe-irritation | |
<AgencySmileIcon /> | agency-smile | |
<AgencySmileyIcon /> | agency-smiley | |
<AgencySometimesIcon /> | agency-sometimes | |
<AgencySometimesClockIcon /> | agency-sometimes-clock | |
<AgencySparkleIcon /> | agency-sparkle | |
<AgencyStarIcon /> | agency-star | |
<AgencySunIcon /> | agency-sun | |
<AgencySunblockIcon /> | agency-sunblock | |
<AgencySunscreenIcon /> | agency-sunscreen | |
<AgencySuperbottleIcon /> | agency-superbottle | |
<AgencySupportCenterIcon /> | agency-support-center | |
<AgencyTemperatureIcon /> | agency-temperature | |
<AgencyTextureIcon /> | agency-texture | |
<AgencyThumbsDownIcon /> | agency-thumbs-down | |
<AgencyThumbsUpIcon /> | agency-thumbs-up | |
<AgencyTimerIcon /> | agency-timer | |
<AgencyTransferIcon /> | agency-transfer | |
<AgencyTrashIcon /> | agency-trash | |
<AgencyTreatmentIcon /> | agency-treatment | |
<AgencyTreatmentPlanIcon /> | agency-treatment-plan | |
<AgencyTretinoinIcon /> | agency-tretinoin | |
<AgencyTruckIcon /> | agency-truck | |
<AgencyUnsatisfiedIcon /> | agency-unsatisfied | |
<AgencyUploadIcon /> | agency-upload | |
<AgencyUserIcon /> | agency-user | |
<AgencyVeryDryIcon /> | agency-very-dry | |
<AgencyVeryOilyIcon /> | agency-very-oily | |
<AgencyVideoIcon /> | agency-video | |
<AgencyVitaminCIcon /> | agency-vitamin-c | |
<AgencyVitaminCSerumIcon /> | agency-vitamin-c-serum | |
<AgencyWrinklesIcon /> | agency-wrinkles | |
<AgencyYesIcon /> | agency-yes | |
<AmexIcon /> | amex | |
<AppleIcon /> | apple | |
<ArrowLeftIcon /> | arrow-left | |
<ArrowRightIcon /> | arrow-right | |
<AzelaicAcidIcon /> | azelaic-acid | |
<BagIcon /> | bag | |
<BellIcon /> | bell | |
<CalendarIcon /> | calendar | |
<CameraIcon /> | camera | |
<ChatBubbleIcon /> | chat-bubble | |
<CheckmarkIcon /> | checkmark | |
<ChestIcon /> | chest | |
<ChevronIcon /> | chevron | |
<CircleIcon /> | circle | |
<CircleAddIcon /> | circle-add | |
<CircleCheckIcon /> | circle-check | |
<CircleRemoveIcon /> | circle-remove | |
<ClindamycinIcon /> | clindamycin | |
<ClipboardIcon /> | clipboard | |
<ClockIcon /> | clock | |
<CloggedPoresIcon /> | clogged-pores | |
<CloudIcon /> | cloud | |
<CombinationIcon /> | combination | |
<ContrastIcon /> | contrast | |
<CrossIcon /> | cross | |
<CurologyLogoLockupIcon /> | curology-logo-lockup | |
<CurologyLogoLockupInverseIcon /> | curology-logo-lockup-inverse | |
<CurologyLogoStickerIcon /> | curology-logo-sticker | |
<CurologyLogoWordmarkIcon /> | curology-logo-wordmark | |
<DarkSpotsIcon /> | dark-spots | |
<DashIcon /> | dash | |
<DesonideIcon /> | desonide | |
<DinersClubIcon /> | diners-club | |
<DiscoverIcon /> | discover | |
<DotIcon /> | dot | |
<DownloadIcon /> | download | |
<DropIcon /> | drop | |
<EditIcon /> | edit | |
<EqualIcon /> | equal | |
<ErrorIcon /> | error | |
<EyeClosedIcon /> | eye-closed | |
<FaceIcon /> | face | |
<FacebookIcon /> | facebook | |
<FadeDarkCirclesIcon /> | fade-dark-circles | |
<FemaleIcon /> | female | |
<FightBreakoutsIcon /> | fight-breakouts | |
<FinelinesIcon /> | finelines | |
<FirmnessIcon /> | firmness | |
<FlagIcon /> | flag | |
<FormulaChangeIcon /> | formula-change | |
<FrontFacingSelfieIcon /> | front-facing-selfie | |
<GiftIcon /> | gift | |
<GoogleIcon /> | google | |
<GridIcon /> | grid | |
<HairBaldSpotsIcon /> | hair-bald-spots | |
<HairBreakageIcon /> | hair-breakage | |
<HairFeelBetterIcon /> | hair-feel-better | |
<HairLossFemale1Icon /> | hair-loss-female-1 | |
<HairLossFemale2Icon /> | hair-loss-female-2 | |
<HairLossFemale3Icon /> | hair-loss-female-3 | |
<HairLossMale1Icon /> | hair-loss-male-1 | |
<HairLossMale2Icon /> | hair-loss-male-2 | |
<HairLossMale3Icon /> | hair-loss-male-3 | |
<HairPreventIcon /> | hair-prevent | |
<HairRegrowIcon /> | hair-regrow | |
<HairSheddingIcon /> | hair-shedding | |
<HairThickerIcon /> | hair-thicker | |
<HairThinningIcon /> | hair-thinning | |
<HairVisibleScalpIcon /> | hair-visible-scalp | |
<HeartIcon /> | heart | |
<HelpIcon /> | help | |
<HomeIcon /> | home | |
<HydrocortisoneIcon /> | hydrocortisone | |
<HydroquinoneIcon /> | hydroquinone | |
<ImageIcon /> | image | |
<InfoIcon /> | info | |
<InstagramIcon /> | instagram | |
<IvermectinIcon /> | ivermectin | |
<JcbIcon /> | jcb | |
<KetoconazoleIcon /> | ketoconazole | |
<KojicAcidIcon /> | kojic-acid | |
<LeftFacingSelfieIcon /> | left-facing-selfie | |
<LightningIcon /> | lightning | |
<LoadingIcon /> | loading | |
<LocationIcon /> | location | |
<LockIcon /> | lock | |
<LogoutIcon /> | logout | |
<MailIcon /> | mail | |
<MaleIcon /> | male | |
<MastercardIcon /> | mastercard | |
<MenuIcon /> | menu | |
<MetronidazoleIcon /> | metronidazole | |
<MicIcon /> | mic | |
<MinusIcon /> | minus | |
<MoreIcon /> | more | |
<NeckIcon /> | neck | |
<NextIcon /> | next | |
<NiacinmideIcon /> | niacinmide | |
<OftenDryIcon /> | often-dry | |
<OftenOilyIcon /> | often-oily | |
<OtherIcon /> | other | |
<PaperclipIcon /> | paperclip | |
<PauseIcon /> | pause | |
<PaymentIcon /> | payment | |
<PayPalIcon /> | payPal | |
<PhoneIcon /> | phone | |
<PinterestIcon /> | pinterest | |
<PlaceholderIcon /> | placeholder | |
<PlanIcon /> | plan | |
<PlayIcon /> | play | |
<PlusIcon /> | plus | |
<PostcardIcon /> | postcard | |
<PreviousIcon /> | previous | |
<ProviderIcon /> | provider | |
<RefreshIcon /> | refresh | |
<RightFacingSelfieIcon /> | right-facing-selfie | |
<RosaceaIcon /> | rosacea | |
<RotateIcon /> | rotate | |
<SearchIcon /> | search | |
<SelfiesIcon /> | selfies | |
<SettingsIcon /> | settings | |
<ShuffleIcon /> | shuffle | |
<SmileIcon /> | smile | |
<SnapchatIcon /> | snapchat | |
<StarIcon /> | star | |
<Star1Icon /> | star-1 | |
<SunIcon /> | sun | |
<SunProtectionIcon /> | sun-protection | |
<TemperatureIcon /> | temperature | |
<TextureIcon /> | texture | |
<ThumbsDownIcon /> | thumbs-down | |
<ThumbsUpIcon /> | thumbs-up | |
<TimerIcon /> | timer | |
<TooltipTriangleIcon /> | tooltip-triangle | |
<TranexAcidIcon /> | tranex-acid | |
<TransferIcon /> | transfer | |
<TrashIcon /> | trash | |
<TreatmentIcon /> | treatment | |
<TretinoinIcon /> | tretinoin | |
<TruckIcon /> | truck | |
<TungstenIcon /> | tungsten | |
<TwitterIcon /> | twitter | |
<UploadIcon /> | upload | |
<UserIcon /> | user | |
<VeryDryIcon /> | very-dry | |
<VeryOilyIcon /> | very-oily | |
<VideoIcon /> | video | |
<VisaIcon /> | visa | |
<VitaminCIcon /> | vitamin-c | |
<WrinklesIcon /> | wrinkles | |
<YoutubeIcon /> | youtube | |
<ZincIcon /> | zinc |
Props
IconProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <svg /> | ||||
fillMethod | "path" | "stroke" | No | Which fill method should be used? | |
image | ReactElement<any, string | JSXElementConstructor<any>> | ElementType | No | ||
size | null | number | "md" | "lg" | "sm" | "xl" | "xs" | "xxl" | 'md' | No | How large should the icon be? Use `null` to rely on the size of the SVG itself. |