Icons - SVG (Crate)
Crate Updates - Pending
APPROVED. Keir has approved. Dev implementation in progress complete.
PENDING APPROVAL. Do not use until Keir has signed off.
<svg class="svg-icon-logo-design-desk-kids-h-c-b">
<use xlink:href="#svg-icon-logo-design-desk-kids-h-c-b"></use>
</svg>
<svg class="svg-icon-logo-crate-and-kids-color-large">
<use xlink:href="#svg-icon-logo-crate-and-kids-color-large"></use>
</svg>
<svg class="svg-icon-logo-crate-and-kids-color-small">
<use xlink:href="#svg-icon-logo-crate-and-kids-color-small"></use>
</svg>
48x48 | 40x40 | 32x32 | 24x24 | 16x16 | ||
---|---|---|---|---|---|---|
<svg class="svg-icon-info-outline"><use xlink:href="#svg-icon-info-outline"></use></svg> | ||||||
<svg class="svg-icon-settings"><use xlink:href="#svg-icon-settings"></use></svg> | ||||||
<svg class="svg-icon-clock"><use xlink:href="#svg-icon-clock"></use></svg> | ||||||
<svg class="svg-icon-shopping-bag"><use xlink:href="#svg-icon-shopping-bag"></use></svg> |
Displayed at 48x48
<svg class="svg-icon-curbside-pickup"><use xlink:href="#svg-icon-curbside-pickup"></use></svg>
Displayed at 40x40
<svg class="svg-icon-curbside-pickup"><use xlink:href="#svg-icon-curbside-pickup"></use></svg>
Displayed at 32x32
<svg class="svg-icon-curbside-pickup"><use xlink:href="#svg-icon-curbside-pickup"></use></svg>
Displayed at 24x24
<svg class="svg-icon-curbside-pickup"><use xlink:href="#svg-icon-curbside-pickup"></use></svg>
Displayed at 16x16
<svg class="svg-icon-curbside-pickup"><use xlink:href="#svg-icon-curbside-pickup"></use></svg>
Arrows
<svg class="svg-icon-arrow-cta"><use xlink:href="#svg-icon-arrow-cta"></use></svg>
<svg class="svg-icon-arrow-down"><use xlink:href="#svg-icon-arrow-down"></use></svg>
<svg class="svg-icon-arrow-left"><use xlink:href="#svg-icon-arrow-left"></use></svg>
<svg class="svg-icon-arrow-right"><use xlink:href="#svg-icon-arrow-right"></use></svg>
<svg class="svg-icon-arrow-up"><use xlink:href="#svg-icon-arrow-up"></use></svg>
<svg class="svg-icon-arrow-down-outline"><use xlink:href="#svg-icon-arrow-down-outline"></use></svg>
<svg class="svg-icon-arrow-left-outline"><use xlink:href="#svg-icon-arrow-left-outline"></use></svg>
<svg class="svg-icon-arrow-right-outline"><use xlink:href="#svg-icon-arrow-right-outline"></use></svg>
<svg class="svg-icon-arrow-up-outline"><use xlink:href="#svg-icon-arrow-up-outline"></use></svg>
<svg class="svg-icon-arrow-primary-left"><use xlink:href="#svg-icon-arrow-primary-left"></use></svg>
<svg class="svg-icon-arrow-primary-right"><use xlink:href="#svg-icon-arrow-primary-right"></use></svg>
<svg class="svg-icon-arrow-secondary-left"><use xlink:href="#svg-icon-arrow-secondary-left"></use></svg>
<svg class="svg-icon-arrow-secondary-right"><use xlink:href="#svg-icon-arrow-secondary-right"></use></svg>
<svg class="svg-icon-chevron-down"><use xlink:href="#svg-icon-chevron-down"></use></svg>
<svg class="svg-icon-chevron-left"><use xlink:href="#svg-icon-chevron-left"></use></svg>
<svg class="svg-icon-chevron-right"><use xlink:href="#svg-icon-chevron-right"></use></svg>
<svg class="svg-icon-chevron-up"><use xlink:href="#svg-icon-chevron-up"></use></svg>
<svg class="svg-icon-arrow-submit"><use xlink:href="#svg-icon-arrow-submit"></use></svg>
Corporate Social Responsibility (CSR)
CSR icons have moved to their own CodePen that includes full code snippets for required accessibility.
<svg class="svg-icon-csr-bug-fair-trade"><use xlink:href="#svg-icon-csr-bug-fair-trade"></use></svg>
<svg class="svg-icon-csr-bug-fsc"><use xlink:href="#svg-icon-csr-bug-fsc"></use></svg>
<svg class="svg-icon-csr-bug-greenguard"><use xlink:href="#svg-icon-csr-bug-greenguard"></use></svg>
<svg class="svg-icon-csr-bug-nontoxic"><use xlink:href="#svg-icon-csr-bug-nontoxic"></use></svg>
<svg class="svg-icon-csr-bug-organic"><use xlink:href="#svg-icon-csr-bug-organic"></use></svg>
<svg class="svg-icon-csr-bug-sustainable"><use xlink:href="#svg-icon-csr-bug-sustainable"></use></svg>
Fabric
<svg class="svg-icon-fabric-bestsellers">
<use xlink:href="#svg-icon-fabric-bestsellers"></use>
</svg>
<svg class="svg-icon-fabric-easycare">
<use xlink:href="#svg-icon-fabric-easycare"></use>
</svg>
<svg class="svg-icon-fabric-familyfriendly">
<use xlink:href="#svg-icon-fabric-familyfriendly"></use>
</svg>
<svg class="svg-icon-fabric-genuineleather">
<use xlink:href="#svg-icon-fabric-genuineleather"></use>
</svg>
<svg class="svg-icon-fabric-highlydurable">
<use xlink:href="#svg-icon-fabric-highlydurable"></use>
</svg>
<svg class="svg-icon-fabric-linenlook">
<use xlink:href="#svg-icon-fabric-linenlook"></use>
</svg>
<svg class="svg-icon-fabric-stainresistant">
<use xlink:href="#svg-icon-fabric-stainresistant"></use>
</svg>
<svg class="svg-icon-fabric-textured">
<use xlink:href="#svg-icon-fabric-textured"></use>
</svg>
<svg class="svg-icon-fabric-uvresistant">
<use xlink:href="#svg-icon-fabric-uvresistant"></use>
</svg>
<svg class="svg-icon-fabric-velvet">
<use xlink:href="#svg-icon-fabric-velvet"></use>
</svg>
<svg class="svg-icon-fabric-wovenintheusa">
<use xlink:href="#svg-icon-fabric-wovenintheusa"></use>
</svg>
Header
<svg class="svg-icon-search"><use xlink:href="#svg-icon-search"></use></svg>
<svg class="svg-icon-map-pin-outline"><use xlink:href="#svg-icon-map-pin-outline"></use></svg>
<svg class="svg-icon-map-pin-solid"><use xlink:href="#svg-icon-map-pin-solid"></use></svg>
<svg class="svg-icon-account-outline"><use xlink:href="#svg-icon-account-outline"></use></svg>
<svg class="svg-icon-account-solid"><use xlink:href="#svg-icon-account-solid"></use></svg>
<svg class="svg-icon-cart"><use xlink:href="#svg-icon-cart"></use></svg>
Logos
Design Desk, Registry, and Trade Program logos have moved to their own page.
Usage and Aspect Ratio Information
Logos in multiple sizes are due to kerning differences. Please select the appropriate logo for your use-case.
#svg-icon-logo-cb-large
- Use when logo is 200px wide or larger#svg-icon-logo-cb-small
- Use when logo is 199px wide or smaller
#svg-icon-logo-crate-and-kids-large
- Use when logo is 22px tall or taller#svg-icon-logo-crate-and-kids-small
- Use when logo is 21px tall or shorter
#svg-icon-logo-crate-and-kids-teal-large
- Use when logo is 22px tall or taller#svg-icon-logo-crate-and-kids-teal-small
- Use when logo is 21px tall or shorter
Aspect Ratio Calculations
#svg-icon-logo-cb-large
- height X 6.849609375 = width#svg-icon-logo-cb-small
- height X 7.1201171875 = width
#svg-icon-logo-crate-and-kids-small
- height X 5.9619140625 = width#svg-icon-logo-crate-and-kids-small-teal
- height X 5.9619140625 = width
#svg-icon-logo-crate-and-kids-large
- height X 5.5 = width#svg-icon-logo-crate-and-kids-large-teal
- height X 5.5 = width
#svg-icon-logo-cb2
- width X .56 = height#svg-icon-logo-cb2-color
- width X .56 = height
#svg-icon-logo-doodlepad
- width X .4 = height
#svg-icon-logo-handy
- width X .7111 = height
#svg-icon-logo-hudson-grace
- width X .19631 = height
#svg-icon-logo-hudson-grace-stack
- width X .3368421 = height
#svg-icon-logo-the-frame
- width X .182857142 = height
<svg class="svg-icon-logo-apple-pay">
<use xlink:href="#svg-icon-logo-apple-pay"></use>
</svg>
<svg class="svg-icon-logo-cb-large">
<use xlink:href="#svg-icon-logo-cb-large"></use>
</svg>
<svg class="svg-icon-logo-cb-small">
<use xlink:href="#svg-icon-logo-cb-small"></use>
</svg>
<svg class="svg-icon-logo-crate-and-kids-large">
<use xlink:href="#svg-icon-logo-crate-and-kids-large"></use>
</svg>
<svg class="svg-icon-logo-crate-and-kids-small">
<use xlink:href="#svg-icon-logo-crate-and-kids-small"></use>
</svg>
<svg class="svg-icon-logo-crate-and-kids-teal-large">
<use xlink:href="#svg-icon-logo-crate-and-kids-teal-large"></use>
</svg>
<svg class="svg-icon-logo-crate-and-kids-teal-small">
<use xlink:href="#svg-icon-logo-crate-and-kids-teal-small"></use>
</svg>
<svg class="svg-icon-circle-crate-kids">
<use xlink:href="#svg-icon-circle-crate-kids"></use>
</svg>
<svg class="svg-icon-logo-cb2">
<use xlink:href="#svg-icon-logo-cb2"></use>
</svg>
<svg class="svg-icon-logo-design-desk-h-c-t">
<use xlink:href="#svg-icon-logo-design-desk-h-c-t"></use>
</svg>
<svg class="svg-icon-logo-design-desk-h-c-l">
<use xlink:href="#svg-icon-logo-design-desk-h-c-l"></use>
</svg>
<svg class="svg-icon-logo-design-desk-h-c-b">
<use xlink:href="#svg-icon-logo-design-desk-h-c-b"></use>
</svg>
<svg class="svg-icon-logo-design-desk-kids-h-c-b">
<use xlink:href="#svg-icon-logo-design-desk-kids-h-c-b"></use>
</svg>
<svg class="svg-icon-logo-doodlepad">
<use xlink:href="#svg-icon-logo-doodlepad"></use>
</svg>
<svg class="svg-icon-logo-handy">
<use xlink:href="#svg-icon-logo-handy"></use>
</svg>
<svg class="svg-icon-logo-hg">
<use xlink:href="#svg-icon-logo-hg"></use>
</svg>
<svg class="svg-icon-logo-hudson-grace">
<use xlink:href="#svg-icon-logo-hudson-grace"></use>
</svg>
<svg class="svg-icon-logo-hudson-grace-stack">
<use xlink:href="#svg-icon-logo-hudson-grace-stack"></use>
</svg>
<svg class="svg-icon-logo-the-frame">
<use xlink:href="#svg-icon-logo-the-frame"></use>
</svg>
<svg class="svg-icon-logo-registry-ampersand">
<use xlink:href="#svg-icon-logo-registry-ampersand"></use>
</svg>
<svg class="svg-icon-logo-registry-primary">
<use xlink:href="#svg-icon-logo-registry-primary"></use>
</svg>
Misc
<svg class="svg-icon-360spin"><use xlink:href="#svg-icon-360spin"></use></svg>
<svg class="svg-icon-barcode"><use xlink:href="#svg-icon-barcode"></use></svg>
<svg class="svg-icon-barcode-selected"><use xlink:href="#svg-icon-barcode-selected"></use></svg>
<svg class="svg-icon-camera"><use xlink:href="#svg-icon-camera"></use></svg>
<svg class="svg-icon-chat"><use xlink:href="#svg-icon-chat"></use></svg>
<svg class="svg-icon-chat-large"><use xlink:href="#svg-icon-chat-large"></use></svg>
<svg class="svg-icon-clock"><use xlink:href="#svg-icon-clock"></use></svg>
<svg class="svg-icon-close"><use xlink:href="#svg-icon-close"></use></svg>
<svg class="svg-icon-close-outline"><use xlink:href="#svg-icon-close-outline"></use></svg>
<svg class="svg-icon-copy"><use xlink:href="#svg-icon-copy"></use></svg>
<svg class="svg-icon-crib"><use xlink:href="#svg-icon-crib"></use></svg>
<svg class="svg-icon-curbside-pickup"><use xlink:href="#svg-icon-curbside-pickup"></use></svg>
<svg class="svg-icon-custom"><use xlink:href="#svg-icon-custom"></use></svg>
<svg class="svg-icon-credit-card"><use xlink:href="#svg-icon-credit-card"></use></svg>
<svg class="svg-icon-dimensions"><use xlink:href="#svg-icon-dimensions"></use></svg>
<svg class="svg-icon-edit"><use xlink:href="#svg-icon-edit"></use></svg>
<svg class="svg-icon-edit-pencil"><use xlink:href="#svg-icon-edit-pencil"></use></svg>
<svg class="svg-icon-email"><use xlink:href="#svg-icon-email"></use></svg>
<svg class="svg-icon-error"><use xlink:href="#svg-icon-error"></use></svg>
<svg class="svg-icon-exclusive"><use xlink:href="#svg-icon-exclusive"></use></svg>
<svg class="svg-icon-filter"><use xlink:href="#svg-icon-filter"></use></svg>
<svg class="svg-icon-gift"><use xlink:href="#svg-icon-gift"></use></svg>
<svg class="svg-icon-gifting-outline"><use xlink:href="#svg-icon-gifting-outline"></use></svg>
<svg class="svg-icon-group-gifting-outline"><use xlink:href="#svg-icon-group-gifting-outline"></use></svg>
<svg class="svg-icon-heart-outline"><use xlink:href="#svg-icon-heart-outline"></use></svg>
<svg class="svg-icon-heart-solid"><use xlink:href="#svg-icon-heart-solid"></use></svg>
<svg class="svg-icon-help-outline"><use xlink:href="#svg-icon-help-outline"></use></svg>
<svg class="svg-icon-home-delivery"><use xlink:href="#svg-icon-home-delivery"></use></svg>
<svg class="svg-icon-info-outline"><use xlink:href="#svg-icon-info-outline"></use></svg>
<svg class="svg-icon-layout-column"><use xlink:href="#svg-icon-layout-column"></use></svg>
<svg class="svg-icon-layout-grid"><use xlink:href="#svg-icon-layout-grid"></use></svg>
Solid or outline style and color of layout icons are set via CSS.
<svg class="svg-icon-map-pin-outline-blank"><use xlink:href="#svg-icon-map-pin-outline-blank"></use></svg>
<svg class="svg-icon-minus"><use xlink:href="#svg-icon-minus"></use></svg>
<svg class="svg-icon-move-down"><use xlink:href="#svg-icon-move-down"></use></svg>
<svg class="svg-icon-move-up"><use xlink:href="#svg-icon-move-up"></use></svg>
<svg class="svg-icon-notepad"><use xlink:href="#svg-icon-notepad"></use></svg>
<svg class="svg-icon-order-tracking"><use xlink:href="#svg-icon-order-tracking"></use></svg>
<svg class="svg-icon-phone"><use xlink:href="#svg-icon-phone"></use></svg>
<svg class="svg-icon-play-solid"><use xlink:href="#svg-icon-play-solid"></use></svg>
<svg class="svg-icon-play-outline"><use xlink:href="#svg-icon-play-outline"></use></svg>
<svg class="svg-icon-plus"><use xlink:href="#svg-icon-plus"></use></svg>
<svg class="svg-icon-price-tag"><use xlink:href="#svg-icon-price-tag"></use></svg>
<svg class="svg-icon-print"><use xlink:href="#svg-icon-print"></use></svg>
<svg class="svg-icon-left-quotes"><use xlink:href="#svg-icon-left-quotes"></use></svg>
<svg class="svg-icon-returns-exchanges"><use xlink:href="#svg-icon-returns-exchanges"></use></svg>
<svg class="svg-icon-reward-dollars"><use xlink:href="#svg-icon-reward-dollars"></use></svg>
<svg class="svg-icon-rewards"><use xlink:href="#svg-icon-rewards"></use></svg>
<svg class="svg-icon-right-quotes"><use xlink:href="#svg-icon-right-quotes"></use></svg>
<svg class="svg-icon-receipt-outline"><use xlink:href="#svg-icon-receipt-outline"></use></svg>
<svg class="svg-icon-registry"><use xlink:href="#svg-icon-registry"></use></svg>
<svg class="svg-icon-safety-warning-outline"><use xlink:href="#svg-icon-safety-warning-outline"></use></svg>
<svg class="svg-icon-sectional-solid"><use xlink:href="#svg-icon-sectional-solid"></use></svg>
<svg class="svg-icon-security-outline-locked"><use xlink:href="#svg-icon-security-outline-locked"></use></svg>
<svg class="svg-icon-security-outline-unlocked"><use xlink:href="#svg-icon-security-outline-unlocked"></use></svg>
<svg class="svg-icon-settings"><use xlink:href="#svg-icon-settings"></use></svg>
<svg class="svg-icon-share"><use xlink:href="#svg-icon-share"></use></svg>
<svg class="svg-icon-shipping"><use xlink:href="#svg-icon-shipping"></use></svg>
<svg class="svg-icon-shopping-bag"><use xlink:href="#svg-icon-shopping-bag"></use></svg>
<svg class="svg-icon-star-single-outline"><use xlink:href="#svg-icon-star-single-outline"></use></svg>
<svg class="svg-icon-star-single-solid"><use xlink:href="#svg-icon-star-single-solid"></use></svg>
<svg class="svg-icon-star-set-outline"><use xlink:href="#svg-icon-star-set-outline"></use></svg>
<svg class="svg-icon-star-set-solid"><use xlink:href="#svg-icon-star-set-solid"></use></svg>
Color of stars is set via CSS.
Solid: color: #hex;
Outline: stroke is set via color: #hex;
Interior is set via fill: #hex;
<svg class="svg-icon-startover"><use xlink:href="#svg-icon-startover"></use></svg>
<svg class="svg-icon-store-crate-and-kids"><use xlink:href="#svg-icon-store-crate-and-kids"></use></svg>
<svg class="svg-icon-store-design-studio"><use xlink:href="#svg-icon-store-design-studio"></use></svg>
<svg class="svg-icon-swatch"><use xlink:href="#svg-icon-swatch"></use></svg>
<svg class="svg-icon-success"><use xlink:href="#svg-icon-success"></use></svg>
<svg class="svg-icon-text-message"><use xlink:href="#svg-icon-text-message"></use></svg>
<svg class="svg-icon-thank-you-manager"><use xlink:href="#svg-icon-thank-you-manager"></use></svg>
<svg class="svg-icon-trash"><use xlink:href="#svg-icon-trash"></use></svg>
<svg class="svg-icon-verified-reviews"><use xlink:href="#svg-icon-verified-reviews"></use></svg>
<svg class="svg-icon-visibility-hide-outline"><use xlink:href="#svg-icon-visibility-hide-outline"></use></svg>
<svg class="svg-icon-visibility-show-outline"><use xlink:href="#svg-icon-visibility-show-outline"></use></svg>
Video
Set both color
and fill
on video icons to set colors. Fill sets the disc, color sets the other bits.
Zoom Controls
<svg class="svg-icon-expand"><use xlink:href="#svg-icon-expand"></use></svg>
<svg class="svg-icon-zoom-in"><use xlink:href="#svg-icon-zoom-in"></use></svg>
<svg class="svg-icon-zoom-out"><use xlink:href="#svg-icon-zoom-out"></use></svg>
<svg class="svg-icon-expand-outline"><use xlink:href="#svg-icon-expand-outline"></use></svg>
<svg class="svg-icon-zoom-in-outline"><use xlink:href="#svg-icon-zoom-in-outline"></use></svg>
<svg class="svg-icon-zoom-out-outline"><use xlink:href="#svg-icon-zoom-out-outline"></use></svg>
Accessibility Notes
- Decorative: SVG is either purely decorative and the user would not lose any understanding of the page content if it were removed or is paired with real text that communicates its intent.
- Example: Purley Decorative
- Example: Paired with Real Text
- Informative: Excluding the SVG would result in loss of content for the user.
- Example: Informative
- Example: Informative
Usage Notes
- To set the color of an icon, use
color: $text;
where$text
is the variable for the color you need. Some icons also accept afill
value. - IE11 Bug:
SVG
is focusable by default in IE11 which creates an extra tab stop. Add tofocusable="false"
tosvg
prevent this. -
Do not use with
<embed>
,<object>
, or<iframe>
as screen reader support for these is buggy. - To use SVGs in CSS, see next section.
- Complex images can use SVG to make it easier to provide the data in an accessible manner. For a detailed example, please visit https://css-tricks.com/accessible-svgs/.
How to Use in CSS
It is possible to insert an SVG via CSS. This should only be done for purely decorative SVGs.
When using in CSS as a content url:
<symbol>
must be reverted to a stand alone SVG.- Change
<symbol>
to<svg>
- Restore
xmlns='http://www.w3.org/2000/svg'
attribute. - Remove
id
attribute. - Add the following attributes:
aria-hidden='true' focusable='false'
- Keep
viewBox
attribute. - Optional: add
width
andheight
attributes.
- Change
- Keyword variables will not work for these.
fill
,stroke
,stroke-width
values need to be specified. - The string must be encoded. Tip: Enclose the URL value with double quotes and use single quotes on attribute values to reduce the amount of encoding needed.
- Add
charset=utf8
for cross-browser compatibility.
content: url("data:image/svg+xml;charset=utf8,%3Csvg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 32 32'
aria-hidden='true'
focusable='false'
%3E%3Cpath
fill='none'
stroke='%23b00'
stroke-width='1.8'
stroke-miterlimit='10'
stroke-linecap='square'
stroke-linejoin='miter'
d='M30.667 16c0 8.1-6.567 14.667-14.667 14.667s-14.667-6.566-14.667-14.667c0-8.1 6.566-14.667 14.667-14.667s14.667 6.566 14.667 14.667z'%3E%3C/path%3E%3Cpath
fill='none'
stroke='%23b00'
stroke-width='1.8'
stroke-miterlimit='10'
stroke-linecap='square'
stroke-linejoin='miter'
d='M16 9.333v8'%3E%3C/path%3E%3Cpath
fill='%23b00'
stroke='%23b00'
stroke-width='1'
d='M17.067 22.4c0 0.589-0.478 1.067-1.067 1.067s-1.067-0.478-1.067-1.067c0-0.589 0.478-1.067 1.067-1.067s1.067 0.478 1.067 1.067z'%3E%3C/path%3E%3C/svg%3E");
External Usage
For example, on international franchise sites or other partner sites:
- Please include the SVG Sprite code in the html of your page template to enable to the code above to work.
- It no longer matters where in the source code order it appears so feel free to place it after your footer.
- You may delete the icon symbols you are not using if desired to reduce the amount of markup.
- Stroke-width is set via CSS.
- Please inspect the individual icon above that you wish to use to determine it base stroke-width and tweak as appropriate for your use-case.
.your-icon-class { stroke-width: 1.3333; }
- Color is set via CSS using the color property. Some icons also accept a
fill
value..your-icon-class { color: #222; fill: #fff; }
- Mock Demo Example
Crate SVG Sprite Code