Icons - SVG (CB2)
Pending Approval
PENDING APPROVAL. Do not use until Designer has signed off.
APPROVED. Designer has approved. Dev implementation in progress complete.
48x48 | 40x40 | 32x32 | 24x24 | 16x16 | ||
---|---|---|---|---|---|---|
<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-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>
Displayed at 40x40
<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>
Displayed at 32x32
<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>
Displayed at 24x24
<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>
Displayed at 16x16
<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>
Arrows
<svg class="svg-icon-arrow-back"><use xlink:href="#svg-icon-arrow-back"></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-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>
<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>
Customer Service
Shown in 80x80 size as used on the Customer Service pages.
<svg class="svg-icon-credit-card"><use xlink:href="#svg-icon-credit-card"></use></svg>
<svg class="svg-icon-gift-card"><use xlink:href="#svg-icon-gift-card"></use></svg>
<svg class="svg-icon-order-tracking"><use xlink:href="#svg-icon-order-tracking"></use></svg>
<svg class="svg-icon-returns"><use xlink:href="#svg-icon-returns"></use></svg>
<svg class="svg-icon-schedule-delivery"><use xlink:href="#svg-icon-schedule-delivery"></use></svg>
<svg class="svg-icon-text"><use xlink:href="#svg-icon-text"></use></svg>
Fabric
<svg class="svg-icon-fabric-familyfriendly">
<use xlink:href="#svg-icon-fabric-familyfriendly"></use>
</svg>
<svg class="svg-icon-fabric-luxury">
<use xlink:href="#svg-icon-fabric-luxury"></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-account-outline"><use xlink:href="#svg-icon-account-outline"></use></svg>
<svg class="svg-icon-cart"><use xlink:href="#svg-icon-cart"></use></svg>
Logos
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 class="svg-icon-logo-cb2
- width X .56 = height#svg class="svg-icon-logo-cb2-color
- width X .56 = height
#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 class="svg-icon-logo-handy
- width X .7111 = height
#svg class="svg-icon-logo-hudson-grace
- width X .19631 = height
#svg class="svg-icon-logo-shoprunner-sm
- width X 1.38 = height
#svg class="svg-icon-logo-shoprunner-lg
- width X .125 = 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-cb2">
<use xlink:href="#svg-icon-logo-cb2">
</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-logo-handy">
<use xlink:href="#svg-icon-logo-handy"></use>
</svg>
<svg class="svg-icon-logo-hudson-grace">
<use xlink:href="#svg-icon-logo-hudson-grace"></use>
</svg>
<svg class="svg-icon-logo-shoprunner-sm"><use xlink:href="#svg-icon-logo-shoprunner-sm"></use></svg>
<svg class="svg-icon-logo-shoprunner-lg"><use xlink:href="#svg-icon-logo-shoprunner-lg"></use></svg>
Misc
<svg class="svg-icon-audio-mute"><use xlink:href="#svg-icon-audio-mute"></use></svg>
<svg class="svg-icon-audio-unmute"><use xlink:href="#svg-icon-audio-unmute"></use></svg>
<svg class="svg-icon-camera"><use xlink:href="#svg-icon-camera"></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-copy"><use xlink:href="#svg-icon-copy"></use></svg>
<svg class="svg-icon-credit-card"><use xlink:href="#svg-icon-credit-card"></use></svg>
<svg class="svg-icon-custom"><use xlink:href="#svg-icon-custom"></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-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-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-info-outline"><use xlink:href="#svg-icon-info-outline"></use></svg>
<svg class="svg-icon-layout-column outline"><use xlink:href="#svg-icon-layout-column"></use></svg>
<svg class="svg-icon-layout-column solid"><use xlink:href="#svg-icon-layout-column"></use></svg>
<svg class="svg-icon-layout-grid outline"><use xlink:href="#svg-icon-layout-grid"></use></svg>
<svg class="svg-icon-layout-grid solid"><use xlink:href="#svg-icon-layout-grid"></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-pickup-box"><use xlink:href="#svg-icon-pickup-box"></use></svg>
<svg class="svg-icon-play-solid"><use xlink:href="#svg-icon-play-solid"></use></svg>
<svg class="svg-icon-plus"><use xlink:href="#svg-icon-plus"></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-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-safety-warning-outline"><use xlink:href="#svg-icon-safety-warning-outline"></use></svg>
<svg class="svg-icon-sectional-outline"><use xlink:href="#svg-icon-sectional-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-share"><use xlink:href="#svg-icon-share"></use></svg>
<svg class="svg-icon-shipping-truck"><use xlink:href="#svg-icon-shipping-truck"></use></svg>
<svg class="svg-icon-shopping-bag"><use xlink:href="#svg-icon-shopping-bag"></use></svg>
<svg class="svg-icon-success"><use xlink:href="#svg-icon-success"></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>
Usage Notes
- To set the color of an icon, use
color: $text;
where$text
is the variable for the color you need. - 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. -
When using in CSS as a background or content image url, the string must be encoded and include
charset=utf8
for cross-browser compatibility.
Tip: Enclose the URL value with double quotes and use single quotes on attribute values to reduce the amount of encoding needed.-
content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%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");
- URL-encoder for SVG
-
- 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/.
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 icon 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.8667; }
- Color is set via CSS using the color property.
.your-icon-class { color: #222; }
- Mock Demo Example
CB2 SVG Sprite Code