EverWeb ThemeKit

Website Icons

Icon Types

Icons are widely used for navigation menus, social media icons, symbols and action indicators.
Which icon type to use?

  • Font Icons - Font Awesome
  • PNG (Portable Network Graphic) Image
  • Scaleable Vector Graphics

SVG Icons

Scalable Vector Graphics are now the new sandard for web icons. Here's why …

  • High quality even when the size is increased

  • Minimal file size

  • No extra server requests required

  • Accessible to screen reader

  • Easy styling via CSS

  • No supporting files required

Font Icons

Icon fonts like Font Awesome have been popular over the last decade but cannot compeat with SVGs for quality and efficency

  • Require a large CSS or JS supporting file

  • Supporting file requires an extra server request

  • Inefficient for just a few icons

  • Increased size decreases quality

  • Limited styling options

PNG Iocns

While SVGs are preferrable to font icons both are preferrable to old school PNG images.

  • Comparatively large file size

  • Each one requires a separate request

  • Increased size decreases quality

  • No styling options

Free SVG Icons

The EverWeb ThemeKit widgets have a link to download 100s of SVGs in the "Read Me First" file in the iwdget download folder.
The icons are in categories - custon, iOS, Logos and MD.
To install an SVG …

  • Open an icon folder and find the required icon

  • right click the icon and choose to open it with Textedit.app or a code editor

  • Select all and copy the code

  • Paste the code into the SVG box in the widget settings panel