Icons
Custom Icons
The custom cx-icon icon library is provided in a vector-based image format,
which means the icons can be viewed at any size without loss of image quality.
Beach
CampingIcon Sizing
The default dimensions of cx-icon icons on desktop are 30px x 30px. To display
the icons in a custom size, use the font-size CSS property. The icon in the
example below is set to a font-size of 256px.
WalkingIcon Colors
Our custom icons inherit the default site text color of dark gray (#444).
As of build 263, four new color options are available with the use of existing text color CSS classes:
- Blue (
text-blue) - Red (
text-redortext-clearance) - Green (
text-green) - White (
text-white)
Blue
Red
Green
WhiteIcon Color Contrast
Note that green icons are accompanied by dark gray text because green text does not provide sufficient color contrast against a white background. Similarly, white icons must be used on a dark background that offers sufficient color contrast. Colors can be tested using the Color Contrast Analyzer.
Custom Icon Listing
Below is a full listing of icons available in the cx-icon library. Please check with User Experience in eComm prior to use. The same icon used for different purposes could mix visual metaphors, causing confusion to end users.
| Icon | Icon with Label | Disabled Icon | CSS class |
|---|---|---|---|
| cx-icon-activity-beach | |||
| cx-icon-activity-camping | |||
| cx-icon-activity-chef | |||
| cx-icon-activity-gardening | |||
| cx-icon-activity-nursing | |||
| cx-icon-activity-shower | |||
| cx-icon-activity-summer | |||
| cx-icon-activity-walking | |||
| cx-icon-activity-water | |||
| cx-icon-activity-work | |||
| cx-icon-collection-characters | |||
| cx-icon-collection-crocslights | |||
| cx-icon-collection-realtree | |||
| cx-icon-features-best-sellers | |||
| cx-icon-features-new-arrivals | |||
| cx-icon-features-price-dollar | |||
| cx-icon-features-price-euro | |||
| cx-icon-features-price-pound | |||
| cx-icon-features-price-yen | |||
| cx-icon-features-sale-percent | |||
| cx-icon-features-sale-tag | |||
| cx-icon-gender-women | |||
| cx-icon-gender-men | |||
| cx-icon-gender-girls | |||
| cx-icon-gender-boys | |||
| cx-icon-orders-shipping | |||
| cx-icon-product-360 | |||
| cx-icon-style-accessories | |||
| cx-icon-style-bigandtall | |||
| cx-icon-style-jibbitz | |||
| cx-icon-style-fuzz | |||
| cx-icon-style-boot | |||
| cx-icon-style-boot2 | |||
| cx-icon-style-clog | |||
| cx-icon-style-flat | |||
| cx-icon-style-flat-maryjane | |||
| cx-icon-style-flip | |||
| cx-icon-style-flipflops | |||
| cx-icon-style-heel | |||
| cx-icon-style-loafer | |||
| cx-icon-style-loafer2 | |||
| cx-icon-style-sandal | |||
| cx-icon-style-sandal2 | |||
| cx-icon-style-shoe | |||
| cx-icon-style-slide | |||
| cx-icon-style-slide2 | |||
| cx-icon-style-slipper | |||
| cx-icon-style-sneaker | |||
| cx-icon-info-size |
Symbolset Font
Symbolset is a web font that has individual character entities defined as icons.
As a web font, the color and size options for the icons are easily modified and resolution independent.
A character entity code (e.g. &x1F4AC;) determines which icon will be displayed.
Making Symbolset icons accessible
Use the aria-hidden="true" attribute/value to prevent screen readers from speaking
the character entities, which provide no context to the visually impaired. Alternative text should
be present on the page to explain the purpose of the icon. The sr-only class
or aria-label attribute can be used to include text that is hidden from visual users.
<span class="token entity" title="💬">💬</span> Chat<span class="token entity" title="✉">✉</span><span class="token entity" title=""></span>
Click to Zoom OutSymbolset Icon Listing
Below is a full listing of icons available in the Symbolset font. Please check with User Experience in eComm prior to use. The same icon used for different purposes could mix visual metaphors, causing confusion to end users.
Symbolset keywords not fully supported
Symbolset has the option to use keywords instead of character entities (e.g.
cursor instead of ) but some versions of
Internet Explorer and FireFox do not support this feature. Character entities must be used
to ensure cross-browser compatibility. The keywords are shown here for easier reference when
discussing usage.
Character Entities in CSS
The character entities listed are for use in HTML. To specify icon usage in CSS,
change &#x to \0 and remove the semicolon from the end.
Example: the 'cursor' icon () in CSS would be '\0E001'.
| Icon | Entity | Keyword |
|---|---|---|
| |  | cursor |
| ⌖ | ⌖ | crosshair |
| 🔎 | 🔎 | search |
| |  | zoomin |
| |  | zoomout |
| 👀 | 👀 | view |
| 📎 | 📎 | attach |
| 🔗 | 🔗 | link |
| |  | move |
| ✎ | ✎ | write |
| |  | writingdisabled |
| ✐ | ✐ | erase |
| 📝 | 📝 | compose |
| 🔒 | 🔒 | lock |
| 🔓 | 🔓 | unlock |
| 🔑 | 🔑 | key |
| ⌫ | ⌫ | backspace |
| 🚫 | 🚫 | ban |
| |  | trash |
| ◎ | ◎ | target |
| |  | tag |
| 🔖 | 🔖 | bookmark |
| ⚑ | ⚑ | flag |
| 👍 | 👍 | like |
| 👎 | 👎 | dislike |
| ♥ | ♥ | heart |
| |  | halfheart |
| ⋆ | ⋆ | star |
| |  | halfstar |
| |  | sample |
| |  | crop |
| |  | layers |
| |  | fill |
| |  | stroke |
| 📞 | 📞 | phone |
| |  | phonedisabled |
| |  | rss |
| |  | facetime |
| ↩ | ↩ | reply |
| |  | send |
| ✉ | ✉ | |
| 📥 | 📥 | inbox |
| 💬 | 💬 | chat |
| |  | ellipsischat |
| … | … | ellipsis |
| 👤 | 👤 | user |
| 👧 | 👧 | femaleuser |
| 👥 | 👥 | users |
| |  | cart |
| 💳 | 💳 | creditcard |
| 💲 | 💲 | dollarsign |
| 📊 | 📊 | barchart |
| |  | piechart |
| 📦 | 📦 | box |
| ⌂ | ⌂ | home |
| 🏢 | 🏢 | buildings |
| |  | warehouse |
| 🌎 | 🌎 | globe |
| |  | navigate |
| |  | compass |
| |  | signpost |
| |  | map |
| |  | location |
| 📍 | 📍 | pin |
| |  | database |
| |  | hdd |
| ♫ | ♫ | music |
| 🎤 | 🎤 | mic |
| 🔈 | 🔈 | volume |
| 🔉 | 🔉 | lowvolume |
| 🔊 | 🔊 | highvolume |
| |  | airplay |
| 📷 | 📷 | camera |
| 🌄 | 🌄 | picture |
| 📹 | 📹 | video |
| ▶ | ▶ | play |
| |  | pause |
| ■ | ■ | stop |
| ● | ● | record |
| ⏪ | ⏪ | rewind |
| ⏩ | ⏩ | fastforward |
| ⏮ | ⏮ | skipback |
| ⏭ | ⏭ | skipforward |
| ⏏ | ⏏ | eject |
| 🔁 | 🔁 | repeat |
| ↺ | ↺ | replay |
| 🔀 | 🔀 | shuffle |
| 📕 | 📕 | book |
| 📖 | 📖 | openbook |
| 📓 | 📓 | notebook |
| 📰 | 📰 | newspaper |
| |  | grid |
| |  | rows |
| |  | columns |
| |  | thumbnails |
| |  | filter |
| 💻 | 💻 | desktop |
| |  | laptop |
| |  | tablet |
| 📱 | 📱 | cell |
| 🔋 | 🔋 | battery |
| |  | highbattery |
| |  | mediumbattery |
| |  | lowbattery |
| |  | emptybattery |
| 💡 | 💡 | lightbulb |
| |  | downloadcloud |
| |  | download |
| |  | uploadcloud |
| |  | upload |
| |  | fork |
| |  | merge |
| ⇆ | ⇆ | transfer |
| ↻ | ↻ | refresh |
| |  | sync |
| |  | loading |
| |  | wifi |
| |  | connection |
| 📄 | 📄 | file |
| 📁 | 📁 | folder |
| “ | “ | quote |
| |  | text |
| |  | font |
| ⎙ | ⎙ | |
| 📠 | 📠 | fax |
| |  | list |
| |  | layout |
| |  | action |
| ↪ | ↪ | redirect |
| ⤢ | ⤢ | expand |
| |  | contract |
| ❓ | ❓ | help |
| ℹ | ℹ | info |
| ⚠ | ⚠ | alert |
| ⛔ | ⛔ | caution |
| |  | logout |
| + | + | plus |
| - | - | hyphen |
| ✓ | ✓ | check |
| ␡ | ␡ | delete |
| ⚙ | ⚙ | settings |
| |  | dashboard |
| 🔔 | 🔔 | notifications |
| 🔕 | 🔕 | notificationsdisabled |
| ⏲ | ⏲ | clock |
| ⏱ | ⏱ | stopwatch |
| 📅 | 📅 | calendar |
| |  | addcalendar |
| |  | removecalendar |
| |  | checkcalendar |
| |  | deletecalendar |
| ✈ | ✈ | plane |
| 💼 | 💼 | briefcase |
| ☁ | ☁ | cloud |
| 💧 | 💧 | drop |
| |  | flask |
| ⬆ | ⬆ | up |
| ⬈ | ⬈ | upright |
| ➡ | ➡ | right |
| ⬊ | ⬊ | downright |
| ⬇ | ⬇ | down |
| ⬋ | ⬋ | downleft |
| ⬅ | ⬅ | left |
| ⬉ | ⬉ | upleft |
| |  | navigateup |
| ▻ | ▻ | navigateright |
| |  | navigatedown |
| ◅ | ◅ | navigateleft |
| ▴ | ▴ | directup |
| ▹ | ▹ | directright |
| ▾ | ▾ | dropdown |
| ◃ | ◃ | directleft |
| |  | retweet |
