Logos & Icons

When to Use Icons

  • To summarize and help user to process content
  • As a recognizable visual cue for commonly known functions (e.g. a magnifying glass for “search”)
  • As a clickable target / hit area
  • To make the website friendly
  • To visually group content
  • To increase readability

When Not to Use Icons

  • Don’t rely too much on icons – they should be universally recognizable (close, print, save). If they are not, be sure to use them in combination with text.
  • Make sure icon use does not take focus away from the content of the site. Too many colors can be a distraction.

Available Icon Formats

Each download file contains the following file formats: CSS Sprite, SVG, web font, PNG, PSD, and AI. See below for more information about file formats.

SVG

Scalable Vector Graphic (SVG) will render with the right size and resolution no matter where you display them. Because they are vectors instead of bitmaps, SVGs are flexible and sharp at any size, small in file size, accessible, and can be styled, scripted, animated, and interactive.

More Info: SVG
Usage: Web, mobile and software development, print materials

Web Font Icons

We use the IcoMoon App to create web fonts of our SVG icon sets. Web fonts are downloaded by the user’s browser and can be text characters or icons. By using web fonts for icons, a full range of CSS3 controls are avaliable for styling the icons just as you would text, including: resizable, sharp at any size because they are vector based, colors, shadows, transparency, rotation and animation. Web font icons usually offer smaller file sizes and downloaded in a single server request.

More Info: Web Font Icons
Usage: Web development

CSS Image Sprite

An image sprite is a collection of images baked into a single image. Web pages with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. CSS is used to display only a portion of the image at a time.

More Info: CSS Image Sprites
Usage: Web development

PNG

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression and transparency. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF) and is the most used lossless image compression format on the Web. They are not scalable like SVG and also have much larger file sizes. Generally, PNG should not be used for photographic imagery becuase JPGs offer file size optimization.

More Info: PNG
Usage: Web, mobile and software development, print materials

AI

Adobe Illustrator’s proprietary file format for vector images and illustrations.

Usage: Working image source files for designers

PSD

Adobe Photoshop’s proprietary file format for bitmap images and photographic elements.

Usage: Working image source files for designers