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.

Note any icons currently being used in a project that begin with the letter "d" need to be replaced with the new codes below.

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.

Tooltips For Help Icons

Tooltips can be added below any icon but requires use of the html entity version and two attributes in the parent element. Attributes data-tooltip containing the message for the tooltip and data-tooltip-position containing the side the tooltip is displayed on are both required. The value in the data-tooltip can only be text and no extra styling or elements can be added within the tooltip.

For more examples and tooltip options see tooltips

<div>
    Text that is not clear enough on its own and requires some additional explanation: 
    <span 
        data-tooltip-position="bottom" 
        data-tooltip="More text that will display on hover.">
        &#xf05a;
    </span>
</div>

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