Icon design is ever evolving. As new platforms embrace the use of icons, new terms and references are dreamt up and older terms fall out of favour. This glossary is an ongoing project to document the icon design lexicon. Contributions are very welcome.
16×16 Pixel Icons
This icon size has its own entry here because it has a unique place in the world of icons. It was one of the very first standard icon sizes used on the Windows platform and remains one of the most popular sizes for user interface designs. However, because of its diminutive size it requires special attention from Icon Designers to deliver a quality result. Because of its small size it is accepted you can break general the rules of consistency when rendering the same icon in multiple sizes. Quite often the 16×16 pixel variant will be slightly simpler with a flatter 2D perspective than its larger counterparts. This sacrifice in consistency is important to maintain a clean, crisp and legible icon at such a small size.
Read articles on: small icons
This is used quite broadly but in its strictest sense it represents completely flat icons with no shading or depth, usually mono-colour. However, the term can be used to describe an icon that does have depth and shading but has been drawn in a 2D software application such as Adobe Illustrator or Photoshop.
Read articles on: flat icons
An icon with depth, perspective and shadow. Whilst these can be created in a 2D application such as Photoshop or Illustrator, the most realistic 3D Icons are often created in dedicated 3D rendering software such as Maya or 3D Studio and most likely produced in a Raster format such as PNG.
8 bit Icons
This refers to the colour depth of the icon, 8 bit is 256 colours and where the file format allows (e.g. gif or PNG8) 1 bit or one single colour transparency. Most applications these days can handle higher colour bit rates but you still come across older software that requires 8 bit image files which can place some limitations on an icon designer.
This term is not commonly used but often refers to very simple 2D single colour icons that use a very simple pictorial analogy to get their message across.
Almost Flat Icons
This term is not widely used (except by me perhaps) but describes a generally 2D, flat icon style but with added detail, normally brightly coloured with minimal detail and shadow effects. This style has gained more popularity since Windows 8 introduced the very stark flat ‘Metro’ style and has been adopted to a certain extent by the Android platform.
Read articles on: flat icons
Icons used on the Android mobile platform. Like most other operating systems Android have specific design prerequisites such as perspective, palette and sizes.
Read articles on: android icons
An App Icon is typically the icon used to launch an app on a mobile platform, from the home-screen. It is also used to describe its desktop bound predecessor, the Application, Launcher or Short-cut Icon. An App is also often used as an advertisement for an Application and the first exposure of an App to a potential customer. This is why such great importance should be heaped upon its design as it is a very important piece of marketing collateral.
This is generally used to describe icons used on a Mac OS platform which are generally very detailed and glossy in appearance. The default file format for OSX icons is ICNS.
Read articles on: apple icons
A png file of 45×45 pixels used by Apple iPhone and iPod Touch devices as a graphical website short-cut. This file should be stored in the root of a website directory. This file is very similar in function to the Windows Favicon file.
A png file of 100×100 pixels used by Apple iPad devices as a graphical website short-cut. This file should be stored in the root of a website directory. This file is very similar in function to the Windows Favicon file.
Whilst this term can be used cross platform to describe any icon that launches an App or software application, it is historically synonymous with the Windows Application Icon format ICO.
A broad term used to describe an icon design style not deliberately following an established style. A custom icon style is often used in software applications or Apps where the client wishes to stand out from other software. The use of custom icon styles is probably most popular on websites where branding is more important that a familiar user interface.
This is perhaps a more archaic metaphor for App, Application or Launcher Icons and historically associated with early desktop based home computers.
Explorer icons are typically 16×16 pixel icons used in an expanding ‘Explorer’ view used in Windows Software, gaining popularity in the XP era.
This is a specially named icon ‘favicon.ico’ originally used by Internet Explorer to display a small 16×16 pixel icon in the web browser address bar. This file, stored in the root of a website is read by almost all web browsers now and is used as an additional piece of eye candy for website visitors but more importantly is stored on the clients computer as a ‘short-cut icon’ along with the URL whenever you ‘Favourite’ a website. More recent browsers allow for the addition of a 32×32 pixel version to be stored and displayed as well but this has not yet become a standard.
A basic 2D style made most popular by the launch of Microsoft’s Windows 8 operating system. However, the term is not synonymous with the Microsoft Metro Icon style and can be used to describe any very simple, mono-colour, usually vector graphics. That been said the term is fairly loosely applied to icon styles which are neither mono-colour or completely flat and as a generalisation for a ‘simple icon style’.
Icons that you don’t have to pay for! However the use of ‘Free Icons‘ may be restricted under certain licensing conditions.
Very popular a few years ago, this shiny and often detailed but stylised icon style was pioneered by Apple on their Mac OSX operating system.
Graphic User Interface icons, more commonly known these days as UI icons.
The native file format for Apple Mac OSX Icon files. ICNS is actually a container holding several files in different sizes and colour depths that the host software can call upon to display as it sees fit. Microsoft Windows uses a similar Icon container format, ICO.
The native file format for Windows PC based operating systems Icon files. ICO is actually a container holding several files in different sizes and colour depths that the host software can call upon to display as it sees fit. Apple’s Mac OSX uses a similar Icon container format, ICNS.
Icon design is the process of designing a graphic symbol that represents some real, fantasy or abstract motive, entity or action. In the context of software applications, an icon often represents a program, a function, data or a collection of data on a computer system.
Icon Design Software
Software applications focused on designing icons. The most popular include Axialis’ Icon Workshop, Impact Software’s Microangelo and my personal favourite but sadly the recently discontinued, Adobe Fireworks.
An exclusive online software system developed by Creative Freedom Ltd to assist in the management of icon design projects. The Icon Manager allows all parties involved in an icon design project, Designers, Clients, Account Managers, etc. to view and participate in the icon design process via a secure online portal.
Different software platforms can have different rules as to the look and feel of their App icons. Perspective is just one method of differentiation Icon styles on 3D icons. Windows and Android for instance use very different vanishing point perspective to give a distinctive look to their environments.
Each operating system has its own specific set of icon size requirements. With so many platforms available now an Icon Designer might be expected to render over 30 different Icon sizes and formats to cover Android, iOS, OSX, Windows OS & Windows 8 Phone.
Depending on where the icon is to be used, you may need to follow certain style cues for the icon to look correct next to its peers. However, some designers deliberately push the boundaries of accepted style in order to help their application stand out. Historically this has been most prolific in Windows App icons which is possibly due to the failure of Microsoft to properly document or even implement a coherent icon style. The other environment where styles differ massively is on the web, where icon styles need not follow any particular rules.
Icon Workshop is an Icon Design application by Axialis software. Probably among the most useful applications for rendering ICO and ICNS Icon files with some handy time saving tools.
See User Interface Icons
These icons are synonymous with iPad, iPhone and iPod touch user interfaces and feature a slightly raised 3D look on a button background which is square in shape with rounded corners. The most recent incarnation of iOS7 goes for a much flatter look, with very vibrant colours and a slightly revised profile to the button background corner radii.
iOS 7 Icons
The latest version of iOS represents a departure for Apple from a detailed 3d look to a flat and brightly coloured style. Unlike most design revolutions by Apple, iOS7 icons have truly divided opinion; some are even unwilling to update to the new OS because of the new look. From a designers point of view it has been very stimulating; there have never been more alternative designs produced for a new operating system.
App Launcher icons developed for the iOS platform.
App Launcher icons developed for the iOS platform.
Icon used to ‘launch’ an application. Also know as Desktop, Application or App Icons.
Icons used within a user interface and usually within a prominent horizontal bar at the top of a software application. The same term can be used to describe the control icons within Web browsers and even Websites. The introduction of mobile platforms has further broadened the use of the term which now just means any icon in a user interface used to perform some control function.
A flat mono-colour icon style copyrighted by Microsoft. Often incorrectly used to describe any flat icon style, much in the way the brand name ‘Hoover’ is used to describe a generic vacuum cleaner. Unlike Hoover however, Microsoft are much more likely to sue your backside for the privilege.
In the early days of icon design, Microangelo was the only really good tool for creating and editing Windows ICO files.
Another generic term to describe flat 2D icons, often drawn in a vector file format.
Icons drawn or rendered in a fixed raster or bitmap file format that cannot be scaled without pixelation, unlike vector which can. Advantages include the relative ease with which detail and effects can be applied with software such as Adobe Photoshop.
See Vector Icons below.
Used to describe smaller icons that are usually much harder to illustrate such as 16×16 pixels.
Software icons is often used to describe icons used within a software suite as opposed to an application icon used to launch it. Also know as User Interface or UI Icons.
The ‘Scalable Vector Format’ is pretty much what it sounds like, a file format that is vector based, allowing scaling but its special feature is that it is also almost universally supported by web browsers, making it a very useful and flexible file format.
User Interface Icons, see below.
User Interface Icons
Icons displayed within the user interface of an application or website, usually serving some control function. Generally a user interface icon being more focused on communicating an idea or function that perhaps an application icon, is often simpler and less elaborate in design to make it more intuitive to users.
An icon rendered in a vector format based on mathematical co-ordinates rather than individual pixels. Due to its formulaic structure it can be scaled up or down without losing any detail, lines remain crisp and no pixelation occurs. The downside to vector icons is that it requires a lot of work by the designer to inject the same detail and effects more easily applied to a bitmap or raster file format.
Icons designed to be used on a website, either as part of a menu system or as a call to action or graphical illustration. Icons are very often used on websites to represent different categories or areas of a website and if designed well can be much faster and more universally understood/translated than a text heading.
See Web Icons above.
Windows Application Icons
Desktop Application Launcher Icons in ICO format. The latest version support 256, 48 32 & 16 pixels in 24 bit, 8bit and 4 bit colour depths. See also Windows Icons below.
Windows 7 Icons
From Windows XP, right through to Windows 7, the icon style has remained broadly similar with a 3/4 front on perspective, 3D style and drop shadow. Windows 7 compliant ICO files contain 256, 48, 32 and 16 pixel icons in at least 24bit and 8 bit versions for maximum backwards compatibility.
Windows 8 Icons
A huge departure from all previous Windows operating systems, Windows 8 Icons introduced the flat 2D Metro Icon style.
Icons used on Microsoft’s Windows operating system, until recently this meant ICO format but Windows 8 now requires individual PNG files rather than ICO application files for its application launchers.
Windows Phone Icons
Icons design specifically for the Windows Phone platform, typically flat 2D illustrations in PNG format.
Windows Vista Icons
A step up from Windows XP Icons, Windows Vista was the first version of Windows to introduce a high resolution icon size to the ICO application Icon format, 256×256 pixels in 24bit colour. Although the operating system itself was not among Microsoft’s best efforts, the enhancements to the Application Icons made the Windows desktop a potentially much more beautiful place than it had ever been before, for once rivalling Apple.
Briefly, XAML Icons are a combination of a graphical element, either raster or vector (although predominantly vector), with XML to control how the graphic is used in a software environment. The format is used predominantly in Microsoft based environments such as Visual Basic, WPF (Windows Presentation Foundation), Silverlight and Windows Phone 8.
If you disagree with any of the above or have any additions, it would be great to hear from you.