Icons - SVG (Crate)

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.

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-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-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>

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-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>

Navigation

<svg class="svg-icon-menu"><use xlink:href="#svg-icon-menu"></use></svg>

Social Media

<svg class="svg-icon-facebook"><use xlink:href="#svg-icon-facebook"></use></svg>
<svg class="svg-icon-houzz"><use xlink:href="#svg-icon-houzz"></use></svg>
<svg class="svg-icon-instagram"><use xlink:href="#svg-icon-instagram"></use></svg>
<svg class="svg-icon-pinterest"><use xlink:href="#svg-icon-pinterest"></use></svg>
<svg class="svg-icon-tiktok"><use xlink:href="#svg-icon-tiktok"></use></svg>
<svg class="svg-icon-twitter"><use xlink:href="#svg-icon-twitter"></use></svg>
<svg class="svg-icon-youtube"><use xlink:href="#svg-icon-youtube"></use></svg>

Video

Set both color and fill on video icons to set colors. Fill sets the disc, color sets the other bits.

<svg class="svg-icon-video-pause"><use xlink:href="#svg-icon-video-pause"></use></svg>
<svg class="svg-icon-video-play"><use xlink:href="#svg-icon-video-play"></use></svg>
<svg class="svg-icon-video-replay"><use xlink:href="#svg-icon-video-replay"></use></svg>
<svg class="svg-icon-video-pause-solid"><use xlink:href="#svg-icon-video-pause-solid"></use></svg>
<svg class="svg-icon-video-play-solid"><use xlink:href="#svg-icon-video-play-solid"></use></svg>
<svg class="svg-icon-video-replay-solid"><use xlink:href="#svg-icon-video-replay-solid"></use></svg>

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>

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 a fill value.
  • IE11 Bug: SVG is focusable by default in IE11 which creates an extra tab stop. Add to focusable="false" to svg 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 and height attributes.
  • 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