Breadcrumbs

Iconography

SpeedFlex uses SVG icons. The color fill for each is defined by CSS and based on icon type. You can use our set of icons, or specify your own SVG code to be used for each icon.

Icon List

Icon

Icon Name

Where the Icon is Used
image-20241113-102805.png

arrow-fill

  • Q&A Content - open dropdown
image-20241113-102840.png

back arrow

  • Visual Content - navigate back
image-20241113-103048.png

caret-down

  • Review List - indicates a sort and filter drop-down is available; click to expand

  • Visual Content - indicates the review is longer than the space available
image-20241113-103302.png

caret-left

  • Q&A Content - go to previous page

  • Review List - go to previous page

  • Instant Answers - go back (shown in the Back button on a search result item)

  • Comment Capture - go to previous page
image-20241113-103353.png

caret-right

  • Q&A Content - go to next page

  • Review List - go to next page

  • Instant Answers - see more details (shown in list items of search results)

  • Instant Answers - submit new question (shown in button)

  • Comment Capture - go to next page

  • Comment Pinboard Teaser - see more comments (shown in button)
image-20241113-103430.png


check

  • Q&A Content - indicates selected items in the multi-item modal

  • Review List - indicates an item is selected in the sort drop-down

  • Informational Modal - decorative icon indicates the modal is for information
image-20241113-103518.png

checkbox-off

  • Review List - indicates an item is not selected in a filter dropdown
image-20241113-103540.png

checkbox-on

  • Review List - indicates an item is selected in a filter dropdown
image-20241113-103608.png


close

  • Q&A Content - remove an item from a multi-item answer

  • Review List - remove a filter

  • Review List - remove content in a search field

  • Visual Content - remove visual content items from a review (appears in review forms on icons)

  • Instant Answers - clear search field

  • Instant Answers - remove item from multi-item questions

  • Modals - close modal
image-20241113-104103.png

controls

  • Review List - indicates show/hide filter controls (shown in button)
image-20241113-104128.png

delete

  • Comment Capture - delete comment
image-20241113-104944.png

error

  • Form Fields - indicates an error (shown beside error text)

  • Error Modal - decorative icon indicates the modal is for an error
image-20241113-105024.png

flag-off

  • Q&A Content - indicates the answer is not flagged as inaccurate; click to flag (appears in the mobile action dropdown)

  • Review List - indicates the review is not flagged; click to flag

  • Visual Content - indicates visual content is not flagged; click to flag (appears in the mobile action dropdown)
image-20241113-105052.png

flag-on

  • Q&A Content - indicates the answer is flagged as inaccurate; click to unflag (appears in the mobile action dropdown)

  • Review List - indicates the review is flagged; click to unflag

  • Visual Content - indicates the visual content is flagged; click to unflag (appears in the mobile action dropdown)
image-20241113-105126.png


helpful-off

  • Q&A List - indicates the answer is not voted as helpful; click to vote for it

  • Review List - indicates the review is not voted as helpful; click to vote for it

  • Visual Content - indicates the visual content is not voted as helpful; click to vote for it
image-20241113-105201.png


helpful-on

  • Q&A List - indicates the answer is voted as helpful; click to remove vote

  • Review List - indicates the review is voted as helpful; click to remove vote

  • Visual Content - indicates the visual content is voted as helpful; click to remove vote
image-20241113-105245.png

info

  • Form Fields - indicates extra information (shown beside informational text)
image-20241113-105321.png


more-H

  • Q&A List - indicates an action menu is available; click to open (mobile view)

  • Review List - indicates an action menu is available; click to open (mobile view)

  • Visual Content - indicates an action menu is available; click to open
image-20241113-105518.png

next-arrow

  • Visual Content - go to next page
image-20241113-105548.png

options-collapse

  • Q&A Content - indicates a list of visible answers; click to hide
image-20241113-105613.png

options-collapse

  • Q&A Content - indicates a list of hidden answers; click to see answers
image-20241113-105639.png

photo

  • Reviews - add a photo (shown in button)
image-20241113-105703.png

question

  • Q&A Content - decorative icon appears in the Q&A list next to "Why did you choose this?" text to indicate comments.
image-20241113-105805.png

quote

  • Q&A Content - decorative icon appears in the Q&A list next to each comment under "Why did you choose this?"
image-20241113-105835.png

reply

  • Q&A Content - reply to answer; shown in an action menu for answers
image-20241113-110011.png

search

  • Review List - indicates search field
image-20241113-110145.png


social-Facebook

  • Comments Pinboard - share to Facebook; appears when hovering on a product image

  • Visual Content - share to Facebook; appears in an action menu
image-20241113-110452.png


social-Pinterest

  • Comments Pinboard - share to Pinterest; appears when hovering on a product image

  • Visual Content - share to Pinterest; appears in an action menu
image-20241113-111232.png


social-twitter

  • Comments Pinboard - share to Twitter; appears when hovering on a product image

  • Visual Content - share to Twitter; appears in an action menu
image-20241113-111341.png

star-empty

  • Review Summary - No reviews - five empty stars appear; click one to open the review form

  • Review Summary - Reviews - five stars represent the average review and empty stars are part of the rating (Example: three filled stars and two empty indicate an average rating of three stars)

  • Review List - five stars represent the possible review and empty stars are part of the rating (Example: three filled stars and two empty indicate the reviewer rated the item three stars)

  • Review - five empty stars appear; click one to indicate your rating (Example: click the third star to indicate a three-star rating.)

  • Do More - five empty stars appear; click one to open the review form
image-20241113-111422.png

star-full

  • Review Summary - Reviews - five stars represent the average review and full stars are part of the rating (Example: three filled stars and two empty indicate an average rating of three stars)

  • Review List - five stars represent the possible review and full stars are part of the rating (Example: three filled stars and two empty indicate the reviewer rated the item three stars)

  • Review - five empty stars appear; click one to indicate your rating (Example: click the third star to indicate a three-star rating.)

  • Do More - five empty stars appear; click one to open the review form
image-20241113-111538.png


star-half

  • Review Summary - Reviews - five stars represent the average review and half stars are part of the rating (Example: three filled stars, one star-half full and one empty indicate an average rating of three-and-a-half stars)
image-20241113-111804.png

unhelpful-off

  • Review List - indicates the review is not down-voted as unhelpful; click to mark it is unhelpful
image-20241113-111832.png

unhelpful-on

  • Review List - indicates the review is down-voted as unhelpful; click to reverse the down-vote
image-20241113-111859.png

video

  • Review - add video (shown in button)
image-20241113-112027.png

vote-off

  • Q&A List - indicates no vote for the question; click to vote
image-20241113-112053.png

vote-on

  • Q&A List - indicates a vote for the question; click to remove vote
image-20241113-112121.png

write

  • Q&A List - write an answer; click to start an answer

  • Comment Capture - edit a comment; click to edit

Preparing Custom Icons

SVG (scalable vector graphic) is a web-friendly graphics format which is infinitely scalable, versatile, and manipulable with code like CSS. Instead of having to generate multiple sizes and colors of icons in PNG format, one SVG icon can be scaled to any size and filled with any color just by using CSS. This saves your designer(s) time, as well as bandwidth on your site.

To help your custom icons look great in our widgets, please follow the guidelines below:

  1. Make sure all grouped shapes/strokes/fills are expanded (often referred to as “expand appearance” or “expand” in vector design programs).

  2. Do not use masks to clip areas of the shape.

  3. Icons should be square in dimension. If the icon shape itself is not square, you can place it within a square artboard and use empty space to fill the dimension. Just remember to export the icon with the dimensions of the artboard.

  4. Check to make sure that any open paths are joined.

  5. Remove any “fill” attributes from your paths. Providing filled icons will prevent the CSS in our system from applying the appropriate theme colors to them. You can remove fills in your design program, or remove them directly from the SVG code. Fill attributes in your code will look like this:

    fill="#73d2e6" fill-rule="evenodd"

Here’s an example of how two different types of icons might look in your design program:

image-20240422-105616.png
image-20240422-105640.png

Notice that all paths are closed, there are no masks applied, and the icons are on a square artboard.

Here’s what the SVG code looks like for the bell icon (the example above on the left):

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Bell</title><path d="M4.25,17.19h15.5 a7,7,0,0,1-2.56-5.4V8.1a5.19,5.19,0,0,0-10.38,0v3.69A7,7,0,0,1,4.25,17.19Zm19.44,2.6H.31V16.26L1.2,16a4.39,4.39,0,0,0,3-4.17V8.1a7.79,7.79,0,0,1,15.58,0v3.69a4.39,4.39,0,0,0,3,4.17l.89.3ZM7.53,21.09h8.94a5.14,5.14,0,0,1-8.94,0Z" /></svg>

Notice that the SVG's “viewBox” attribute is set to a square dimension, and that the <path> tag does not have a “fill” attribute.

We highly recommend Adobe Illustrator’s SVG export tool (accessible via Export As… > SVG), which provides several options for optimizing your SVG code, as well as a code preview window. The following settings usually produce desirable results:

image-20240422-105735.png