Icons

To request adding new icons to the icon library email dl_Front_End_Developers@digikey.com. When requesting icons to be added please include the icon (svg file or link to the icon source) and a link to the project mockup/design showing the icon in use.

Font Icons

Font icons are visually similar to image file icons but can have css applied to them for different effect including but not limited to color, size and placement. CSS that can be applied to text on a webpage can be applied to a font icon. These are not a replacement for all icons but for icons used globally within text placements they work wonderfully.

To use these icons add the icon classname to an element like so: <span class="icon-squirrel"></span> or use the icon entity  as text. Icons can have css applied to them for color, size, position and animation. Icons are available on any page with the global.css and font-css files on it.

These icons can also be manually put into the css of an individual page using the css content property along with extra formatting css for sizing and placement. Example of the content property: content: "\f005". This method should only be used for more specialized instances like overlaying icons for hover effects.

Image Icons

The icon library is also available as PNG files in black, white, and red with transparent backgrounds in 128x128 pixel dimensions. Image icons use the same naming as the font icons with the addition of _red or _white for the color specific versions. Example: https://www.digikey.com/-/media/Designer/Global/Icons/icon-alarm_red.png. Report and missing png icons to dl_Front_End_Developers@digikey.com.

Available Icons

Arrows

Audio, Video

Business

Cart

Communication

Math

Menus, Lists, and Grids

Spinners

Miscellaneous

Animated Icons

Adding in the class of icon-rotation or icon-stepper will make the icons turn in a circle. Icons will appear to jump around if the size of the element they are attached to has different dimensions than the icon. Adjustments will need to be made in your project to fix this utilizing transform-origin in your css.

Rotating and Flipping Icons

Adding the following classes will turn or flip the icons. If icons don't rotate as expected make sure the element is set to block or inline-block to make it work.

Local Development

Font files are served from Sitecore and come with the global.css files through the sandwich service. The fonts should display properly as long as the url origin for development is digikey (for example local.digikey.com). If your project doesn't use the global files or doesn't follow the necessary url structure then you will need to download and add the font files to your project. Note your local development will not automatically get font updates and will require a manual update with future font files. To request the files needed for local development email dl_Front_End_Developers@digikey.com..