Icons

How to use Icons Effectively

• 1

  Icon Usage

  

  Icons are graphics that help capture users' attention, break down language barriers, and when placed correctly, guide users to perform a target action. 

  Icons should serve only as visual guidelines to aid navigation and enhance the user's experience. Icons should not be used to simply decorate a website.

  Icons are used exclusively on the CTA Card component. When you add an image to a CTA Card, you must choose the .svg image file type. The Media Library automatically filters out all other image type options.  

  All icons display at 75px wide x 75px high. The platform automatically adjusts the icon color to provide visual contrast against the background color you choose for the CTA Card. Example: Selecting a dark background for a CTA Card automatically makes the icon and text display white. 

  CTA Card Help Topic

• 2

  Finding and Using Icons

  All icons must be Scalable Vector Graphics (SVG), which are saved as the .svg file type. Looking at the name, this file type is:

  • Scalable-  it can easily be resized up or down without a loss in quality.
  • Vector- created with points, lines, and curves rather than the pixel grid used to create raster images such as a JPG.
  • Graphic- an image.

  SVG content is stylable, scalable to different display resolutions, and can be viewed stand-alone, mixed with HTML content, or embedded using XML. SVG also supports dynamic changes by using script. 

  All of these features mean that the Digital Commons Platform can apply styling to your icons so that they automatically coordinate with the theme of your website. 

  Accordion

  • Where can I find Icons?
  • Can I Create my own Icons?
  • Add a New Icon to the Media Library
  • Example of a Properly Functioning Icon

  Tab/Accordion Items

  Where can I find Icons?

  We have evaluated these open-source icon libraries and they are compatible with our platform.

  • Bootstrap
  • ICO Moon
  • Font Awesome

  See the Digital Commons Style Guide section on Iconography for more guidance. 

  Can I Create my own Icons?

  While we cannot guarantee icons outside of the recommended libraries, you are welcome to experiment within a few guidelines. 

  To render properly on our platform, your icon artwork must:

  • be created using Adobe Illustrator or a comparable vector-based graphic design program. 
  • be a single color; pure black with a hex code of (#000000).
  • have a transparent background. 
  • be saved as a .svg file. 

  Digital Commons automatically displays all icons at 75px wide x 75px high.  

  Add a New Icon to the Media Library

  You can upload icons directly to the Media Library or while creating a CTA Card. 

  Example of a Properly Functioning Icon

  Tab/Accordion Paragraph

  SVG

  Good Icon

  This icon responds appropriately to the platform's styling.

  This icon of an otter is from the Font Awesome collection. The default .svg that was downloaded has pure black (#000000) artwork on a transparent background. It responds appropriately to the Digital Commons platform color palette styling. 

• 3

  Troubleshooting

  If your icons do not work as designed, check:

  • the Link field on the CTA card, and 
  • use Adobe Illustrator or a similar tool to confirm the artwork color. You may need to save the file from Illustrator for it to work properly. 

  Accordion

  • CTA Card without a Link
  • Wrong Artwork Color

  Tab/Accordion Items

  CTA Card without a Link

  Tab/Accordion Paragraph

  SVG

  CTA Card without a Link

  This CTA Card does not provide a link which disrupts the icon styling.

  This icon of an otter is from the Font Awesome collection. The default .svg that was downloaded has pure black (#000000) artwork on a transparent background. This CTA Card should display with light text and icon on a dark green background, but it does not. 

  The icon does not respond to platform styling because instead of providing a page title or URL in the Link field, <nolink> has been entered.

  Remember that icons are not to be used merely for decoration and are meant to aid navigation. Likewise, CTA Cards are used as a means to "call to action" and should include a hyperlink. 

  Wrong Artwork Color

  Tab/Accordion Paragraph

  SVG

  Black Artwork has Wrong Hex Code

  This icon does not respond to the platform's styling. The black icon is difficult to see against the dark green background.

  This icon of an otter is from the Font Awesome collection. The icon color was adjusted on the Font Awesome website before downloading it as an .svg.  The icon looks black (#050505), but it does not respond to the Digital Commons platform color palette styling because the color hex code is incorrect; it should be pure black (#000000). 

  You can fix this problem by using Adobe Illustrator to correct the color and resave the icon before reuploading to Digital Commons.  

• 4

  Add Alternative Text for Accessibility

  All meaningful images must have descriptive alternative text (alt text) to be accessible for visitors with low or no vision. Learn more about Alternative Text. 

  If the image does not convey meaningful information and is purely decorative, check the box for Decorative Image and leave the Alternative Text field empty. This allows screen reading software to skip over the image. 

  If both the Alternative Text field is empty and the Decorative Image box remains unchecked, the Editoria11y accessibility checker will flag the image and prompt you to provide a description.