@shopify/polaris/dist/esnext/components/Icon/Icon.css

Shopify’s product component library

.Polaris-Icon_yj27d{ display:block; height:2rem; width:2rem; max-height:100%; max-width:100%; margin:auto; }

.Polaris-Icon--hasBackdrop_1anyy{ position:relative; display:flex; align-items:center; margin:0.4rem; }

.Polaris-Icon--hasBackdrop_1anyy::before{ content:''; position:absolute; top:-0.4rem; bottom:-0.4rem; left:-0.4rem; right:-0.4rem; border-radius:50%; }

.Polaris-Icon--isColored_uhqnf{ color:var(--p-surface, white); }

.Polaris-Icon--colorWhite_bnvg7{ color:transparent; }

.Polaris-Icon--colorWhite_bnvg7 svg{ fill:white; }

.Polaris-Icon--colorWhite_bnvg7 img{ filter:brightness(0) saturate(100%) invert(100%); }

.Polaris-Icon--colorWhite_bnvg7.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-subdued); }

.Polaris-Icon--colorBlack_1swz6 svg{ fill:black; }

.Polaris-Icon--colorBlack_1swz6 img{ filter:brightness(0) saturate(100%); }

.Polaris-Icon--colorBlack_1swz6.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorSkyLighter_znatw svg{ fill:#f9fafb; }

.Polaris-Icon--colorSkyLighter_znatw img{ filter:brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%); }

.Polaris-Icon--colorSkyLighter_znatw.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-subdued); }

.Polaris-Icon--colorSkyLight_1yg9q svg{ fill:#f4f6f8; }

.Polaris-Icon--colorSkyLight_1yg9q img{ filter:brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%); }

.Polaris-Icon--colorSkyLight_1yg9q.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-subdued); }

.Polaris-Icon--colorSky_1112z svg{ fill:#dfe3e8; }

.Polaris-Icon--colorSky_1112z img{ filter:brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%); }

.Polaris-Icon--colorSky_1112z.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-subdued); }

.Polaris-Icon--colorSkyDark_1kpf3 svg{ fill:#c4cdd5; }

.Polaris-Icon--colorSkyDark_1kpf3 img{ filter:brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%); }

.Polaris-Icon--colorSkyDark_1kpf3.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-subdued); }

.Polaris-Icon--colorInkLightest_1awo8 svg{ fill:#919eab; }

.Polaris-Icon--colorInkLightest_1awo8 img{ filter:brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%); }

.Polaris-Icon--colorInkLightest_1awo8.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorInkLighter_2s08r svg{ fill:#637381; }

.Polaris-Icon--colorInkLighter_2s08r img{ filter:brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%); }

.Polaris-Icon--colorInkLighter_2s08r::before{ background-color:var(--p-surface, #dfe3e8); }

.Polaris-Icon--colorInkLighter_2s08r.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorInkLight_w62ca svg{ fill:#454f5b; }

.Polaris-Icon--colorInkLight_w62ca img{ filter:brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%); }

.Polaris-Icon--colorInkLight_w62ca.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorInk_xnlrc svg{ fill:#212b36; }

.Polaris-Icon--colorInk_xnlrc img{ filter:brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%); }

.Polaris-Icon--colorInk_xnlrc::before{ background-color:var(--p-surface, #dfe3e8); }

.Polaris-Icon--colorInk_xnlrc.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorBlueLighter_1r40m svg{ fill:#ebf5fa; }

.Polaris-Icon--colorBlueLighter_1r40m img{ filter:brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%); }

.Polaris-Icon--colorBlueLighter_1r40m.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorBlueLight_9f4da svg{ fill:#b4e1fa; }

.Polaris-Icon--colorBlueLight_9f4da img{ filter:brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%); }

.Polaris-Icon--colorBlueLight_9f4da.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorBlue_4k1wc svg{ fill:#006fbb; }

.Polaris-Icon--colorBlue_4k1wc img{ filter:brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%) hue-rotate(190deg) brightness(99%) contrast(101%); }

.Polaris-Icon--colorBlue_4k1wc.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorBlueDark_uk4ju svg{ fill:#084e8a; }

.Polaris-Icon--colorBlueDark_uk4ju img{ filter:brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%); }

.Polaris-Icon--colorBlueDark_uk4ju::before{ background-color:var(--p-surface-highlight, #b4e1fa); }

.Polaris-Icon--colorBlueDark_uk4ju.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorBlueDarker_jrpg0 svg{ fill:#001429; }

.Polaris-Icon--colorBlueDarker_jrpg0 img{ filter:brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%); }

.Polaris-Icon--colorBlueDarker_jrpg0.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Icon--colorIndigoLighter_grn7x svg{ fill:#f4f5fa; }

.Polaris-Icon--colorIndigoLighter_grn7x img{ filter:brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%); }

.Polaris-Icon--colorIndigoLighter_grn7x.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-action-primary); }

.Polaris-Icon--colorIndigoLight_1luox svg{ fill:#b3bcf5; }

.Polaris-Icon--colorIndigoLight_1luox img{ filter:brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%); }

.Polaris-Icon--colorIndigoLight_1luox.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-action-primary); }

.Polaris-Icon--colorIndigo_19ycr svg{ fill:#5c6ac4; }

.Polaris-Icon--colorIndigo_19ycr img{ filter:brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%); }

.Polaris-Icon--colorIndigo_19ycr.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-action-primary); }

.Polaris-Icon--colorIndigoDark_yhldv svg{ fill:#202e78; }

.Polaris-Icon--colorIndigoDark_yhldv img{ filter:brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%); }

.Polaris-Icon--colorIndigoDark_yhldv.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-action-primary); }

.Polaris-Icon--colorIndigoDarker_www0x svg{ fill:#000639; }

.Polaris-Icon--colorIndigoDarker_www0x img{ filter:brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%); }

.Polaris-Icon--colorIndigoDarker_www0x.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-action-primary); }

.Polaris-Icon--colorTealLighter_11a3o svg{ fill:#e0f5f5; }

.Polaris-Icon--colorTealLighter_11a3o img{ filter:brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%); }

.Polaris-Icon--colorTealLighter_11a3o.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-highlight); }

.Polaris-Icon--colorTealLight_qzpwm svg{ fill:#b7ecec; }

.Polaris-Icon--colorTealLight_qzpwm img{ filter:brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%); }

.Polaris-Icon--colorTealLight_qzpwm.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-highlight); }

.Polaris-Icon--colorTeal_1nkfh svg{ fill:#47c1bf; }

.Polaris-Icon--colorTeal_1nkfh img{ filter:brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%); }

.Polaris-Icon--colorTeal_1nkfh::before{ background-color:var(--p-surface-highlight, white); }

.Polaris-Icon--colorTeal_1nkfh.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-highlight); }

.Polaris-Icon--colorTealDark_1ryko svg{ fill:#00848e; }

.Polaris-Icon--colorTealDark_1ryko img{ filter:brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%); }

.Polaris-Icon--colorTealDark_1ryko::before{ background-color:var(--p-surface-highlight, #b7ecec); }

.Polaris-Icon--colorTealDark_1ryko.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-highlight); }

.Polaris-Icon--colorTealDarker_1tt2d svg{ fill:#003135; }

.Polaris-Icon--colorTealDarker_1tt2d img{ filter:brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%); }

.Polaris-Icon--colorTealDarker_1tt2d.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-highlight); }

.Polaris-Icon--colorGreenLighter_cu5ub svg{ fill:#e3f1df; }

.Polaris-Icon--colorGreenLighter_cu5ub img{ filter:brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%); }

.Polaris-Icon--colorGreenLighter_cu5ub.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-success); }

.Polaris-Icon--colorGreen_16l00 svg{ fill:#50b83c; }

.Polaris-Icon--colorGreen_16l00 img{ filter:brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%); }

.Polaris-Icon--colorGreen_16l00::before{ background-color:var(--p-surface-success, #e3f1df); }

.Polaris-Icon--colorGreen_16l00.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-success); }

.Polaris-Icon--colorGreenDark_1cz3u svg{ fill:#108043; }

.Polaris-Icon--colorGreenDark_1cz3u img{ filter:brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%); }

.Polaris-Icon--colorGreenDark_1cz3u::before{ background-color:var(--p-surface-success, #bbe5b3); }

.Polaris-Icon--colorGreenDark_1cz3u.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-success); }

.Polaris-Icon--colorYellowLighter_1k6sd svg{ fill:#fcf1cd; }

.Polaris-Icon--colorYellowLighter_1k6sd img{ filter:brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%); }

.Polaris-Icon--colorYellowLighter_1k6sd.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-warning); }

.Polaris-Icon--colorYellow_10c88 svg{ fill:#eec200; }

.Polaris-Icon--colorYellow_10c88 img{ filter:brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%); }

.Polaris-Icon--colorYellow_10c88.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-warning); }

.Polaris-Icon--colorYellowDark_1owr0 svg{ fill:#8a6116; }

.Polaris-Icon--colorYellowDark_1owr0 img{ filter:brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%); }

.Polaris-Icon--colorYellowDark_1owr0::before{ background-color:var(--p-surface-warning, #ffea8a); }

.Polaris-Icon--colorYellowDark_1owr0.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-warning); }

.Polaris-Icon--colorOrange_1jbgb svg{ fill:#f49342; }

.Polaris-Icon--colorOrange_1jbgb img{ filter:brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%); }

.Polaris-Icon--colorOrange_1jbgb.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-warning); }

.Polaris-Icon--colorOrangeDark_5b2ty svg{ fill:#c05717; }

.Polaris-Icon--colorOrangeDark_5b2ty img{ filter:brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%); }

.Polaris-Icon--colorOrangeDark_5b2ty.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-warning); }

.Polaris-Icon--colorRedLighter_1m848 svg{ fill:#fbeae5; }

.Polaris-Icon--colorRedLighter_1m848 img{ filter:brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%); }

.Polaris-Icon--colorRedLighter_1m848.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-critical); }

.Polaris-Icon--colorRed_91id7 svg{ fill:#de3618; }

.Polaris-Icon--colorRed_91id7 img{ filter:brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%); }

.Polaris-Icon--colorRed_91id7.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-critical); }

.Polaris-Icon--colorRedDark_exknp svg{ fill:#bf0711; }

.Polaris-Icon--colorRedDark_exknp img{ filter:brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%); }

.Polaris-Icon--colorRedDark_exknp::before{ background-color:var(--p-surface-critical, #fead9a); }

.Polaris-Icon--colorRedDark_exknp.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-critical); }

.Polaris-Icon--colorPurple_slv30 svg{ fill:#9c6ade; }

.Polaris-Icon--colorPurple_slv30 img{ filter:brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%); }

.Polaris-Icon--colorPurple_slv30.Polaris-Icon--newDesignLanguage_1rik8 svg{ fill:var(--p-icon-highlight); }

.Polaris-Icon--colorBase_nqlaq svg{ fill:var(--p-icon); }

.Polaris-Icon--colorSubdued_113xs svg{ fill:var(--p-icon-subdued); }

.Polaris-Icon--colorCritical_glskc svg{ fill:var(--p-icon-critical); }

.Polaris-Icon--colorWarning_14tqz svg{ fill:var(--p-icon-warning); }

.Polaris-Icon--colorHighlight_2qv4t svg{ fill:var(--p-icon-highlight); }

.Polaris-Icon--colorSuccess_k0sue svg{ fill:var(--p-icon-success); }

.Polaris-Icon--colorPrimary_4ruww svg{ fill:var(--p-action-primary); }

.Polaris-Icon__Svg_375hu, .Polaris-Icon__Img_375hq{ position:relative; display:block; width:100%; max-width:100%; max-height:100%; }

.Polaris-Icon__Placeholder_w9ga3{ padding-bottom:100%; background:currentColor; }