In
computing
Computing is any goal-oriented activity requiring, benefiting from, or creating computing machinery. It includes the study and experimentation of algorithmic processes, and development of both hardware and software. Computing has scientific, e ...
, an icon is a
pictogram
A pictogram, also called a pictogramme, pictograph, or simply picto, and in computer usage an icon, is a graphic symbol that conveys its meaning through its pictorial resemblance to a physical object. Pictographs are often used in writing and ...
or
ideogram
An ideogram or ideograph (from Greek "idea" and "to write") is a graphic symbol that represents an idea or concept, independent of any particular language, and specific words or phrases. Some ideograms are comprehensible only by famili ...
displayed on a
computer screen
A computer monitor is an output device that displays information in pictorial or textual form. A discrete monitor comprises a visual display, support electronics, power supply, housing, electrical connectors, and external user controls.
The di ...
in order to help the user navigate a
computer system
A computer is a machine that can be programmed to carry out sequences of arithmetic or logical operations (computation) automatically. Modern digital electronic computers can perform generic sets of operations known as programs. These progr ...
. The icon itself is a quickly comprehensible symbol of a
software
Software is a set of computer programs and associated documentation and data. This is in contrast to hardware, from which the system is built and which actually performs the work.
At the lowest programming level, executable code consists ...
tool, function, or a
data file
A data file is a computer file which stores data to be used by a computer application or system, including input and output data. A data file usually does not contain instructions or code to be executed (that is, a computer program).
Most of the ...
, accessible on the system and is more like a
traffic sign
Traffic signs or road signs are signs erected at the side of or above roads to give instructions or provide information to road users. The earliest signs were simple wooden or stone milestones. Later, signs with directional arms were introduce ...
than a detailed
illustration
An illustration is a decoration, interpretation or visual explanation of a text, concept or process, designed for integration in print and digital published media, such as posters, flyers, magazines, books, teaching materials, animations, vid ...
of the actual entity it represents.
It can serve as an electronic
hyperlink or
file shortcut
In computing, a file shortcut is a handle in a user interface that allows the user to find a file or resource located in a different directory or folder from the place where the shortcut is located. Similarly, an Internet shortcut allows the use ...
to access the program or data. The user can activate an icon using a mouse, pointer, finger, or recently
voice command
Speech recognition is an interdisciplinary subfield of computer science and computational linguistics that develops methodologies and technologies that enable the recognition and translation of spoken language into text by computers with the ma ...
s. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage.
In activating an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file or code.
Icons as parts of the
graphical user interface
The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inste ...
of the computer system, in conjunction with
windows
Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for serv ...
,
menus and a
pointing device
A pointing device is a human interface device that allows a user to input spatial (i.e., continuous and multi-dimensional) data to a computer. CAD systems and graphical user interfaces (GUI) allow the user to control and provide data to ...
(mouse), belong to the much larger topic of the
history of the graphical user interface
The history of the graphical user interface, understood as the use of graphic icon (computing), icons and a pointing device to control a computer, covers a five-decade span of incremental refinements, built on some constant core principles. Se ...
that has largely supplanted the
text-based interface
In computing, text-based user interfaces (TUI) (alternately terminal user interfaces, to reflect a dependence upon the properties of computer terminals and not just text), is a retronym describing a type of user interface (UI) common as an ear ...
for casual use.
Overview
![USB icon](https://upload.wikimedia.org/wikipedia/commons/6/6c/USB_icon.png)
The computing definition of "icon" can include three distinct
semiotical elements:
Icon
An icon () is a religious work of art, most commonly a painting, in the cultures of the Eastern Orthodox, Oriental Orthodox, and Catholic churches. They are not simply artworks; "an icon is a sacred image used in religious devotion". The most ...
, which resembles its referent (such as a road sign for falling rocks).
This category includes
stylized
In the visual arts, style is a "...distinctive manner which permits the grouping of works into related categories" or "...any distinctive, and therefore recognizable, way in which an act is performed or an artifact made or ought to be performed a ...
drawings of objects from the office environment or from other professional areas such as printers, scissors, file cabinets and folders.
Index
Index (or its plural form indices) may refer to:
Arts, entertainment, and media Fictional entities
* Index (''A Certain Magical Index''), a character in the light novel series ''A Certain Magical Index''
* The Index, an item on a Halo megastru ...
, which is associated with its referent (smoke is a sign of fire).
This category includes
stylized
In the visual arts, style is a "...distinctive manner which permits the grouping of works into related categories" or "...any distinctive, and therefore recognizable, way in which an act is performed or an artifact made or ought to be performed a ...
drawing used to refer to an actions "
printer
Printer may refer to:
Technology
* Printer (publishing), a person or a company
* Printer (computing), a hardware device
* Optical printer for motion picture films
People
* Nariman Printer (fl. c. 1940), Indian journalist and activist
* James ...
" and "print", "
scissors
Scissors are hand-operated shearing tools. A pair of scissors consists of a pair of metal blades pivoted so that the sharpened edges slide against each other when the handles (bows) opposite to the pivot are closed. Scissors are used for cutti ...
" and "
cut
Cut may refer to:
Common uses
* The act of cutting, the separation of an object into two through acutely-directed force
** A type of wound
** Cut (archaeology), a hole dug in the past
** Cut (clothing), the style or shape of a garment
** Cut (ea ...
" or "
magnifying glass" and "search".
Symbol
A symbol is a mark, sign, or word that indicates, signifies, or is understood as representing an idea, object, or relationship. Symbols allow people to go beyond what is known or seen by creating linkages between otherwise very different conc ...
, which is related to its referent only by convention (letters, musical notation, mathematical operators etc.).
This category includes standardized symbols found across many
electronic device
The field of electronics is a branch of physics and electrical engineering that deals with the emission, behaviour and effects of electrons using electronic devices. Electronics uses active devices to control electron flow by amplification ...
s, such as the
power on/off symbol and the USB icon.
![Power off icon](https://upload.wikimedia.org/wikipedia/commons/a/a0/Power_off_icon.svg)
The majority of icons are encoded and decoded using
metonymy
Metonymy () is a figure of speech in which a concept is referred to by the name of something closely associated with that thing or concept.
Etymology
The words ''metonymy'' and ''metonym'' come from grc, μετωνυμία, 'a change of name' ...
,
synecdoche
Synecdoche ( ) is a type of metonymy: it is a figure of speech in which a term for a part of something is used to refer to the whole (''pars pro toto''), or vice versa (''totum pro parte''). The term comes from Greek .
Examples in common Engl ...
, and
metaphor
A metaphor is a figure of speech that, for rhetorical effect, directly refers to one thing by mentioning another. It may provide (or obscure) clarity or identify hidden similarities between two different ideas. Metaphors are often compared wit ...
.
An example of
metaphorical
A metaphor is a figure of speech that, for rhetorical effect, directly refers to one thing by mentioning another. It may provide (or obscure) clarity or identify hidden similarities between two different ideas. Metaphors are often compared with ...
representation characterizes all the major desktop-based computer systems including
desktop
A desktop traditionally refers to:
* The surface of a desk (often to distinguish office appliances that fit on a desk, such as photocopiers and printers, from larger equipment covering its own area on the floor)
Desktop may refer to various compu ...
that uses an iconic representation of objects from the 1980s office environment to transpose attributes from a familiar context/object to an unfamiliar one. This is known as
skeuomorphism, and an example is the use of the
floppy disk
A floppy disk or floppy diskette (casually referred to as a floppy, or a diskette) is an obsolescent type of disk storage composed of a thin and flexible disk of a magnetic storage medium in a square or nearly square plastic enclosure lined w ...
to represent saving data; even though floppy disks have been obsolete for roughly a quarter century, it is still recognized as "the save icon".
Metonymy
Metonymy () is a figure of speech in which a concept is referred to by the name of something closely associated with that thing or concept.
Etymology
The words ''metonymy'' and ''metonym'' come from grc, μετωνυμία, 'a change of name' ...
is in itself a subset of metaphors that use one entity to point to another related to it such as using a
fluorescent bulb
A fluorescent lamp, or fluorescent tube, is a low-pressure mercury-vapor gas-discharge lamp that uses fluorescence to produce visible light. An electric current in the gas excites mercury vapor, which produces short-wave ultraviolet lig ...
instead of a filament one to represent power saving settings.
Synecdoche
Synecdoche ( ) is a type of metonymy: it is a figure of speech in which a term for a part of something is used to refer to the whole (''pars pro toto''), or vice versa (''totum pro parte''). The term comes from Greek .
Examples in common Engl ...
is considered as a special case of metonymy, in the usual sense of the part standing for the whole such as a single component for the entire system,
speaker driver
An electrodynamic speaker driver, often called simply a speaker driver when the type is implicit, is an individual transducer that converts an electrical audio signal to sound waves. While the term is sometimes used interchangeably with the ...
for the entire
audio system
Sound recording and reproduction is the electrical, mechanical, electronic, or digital inscription and re-creation of sound waves, such as spoken voice, singing, instrumental music, or sound effects. The two main classes of sound recording te ...
settings.
Additionally, a group of icons can be categorised as brand icons, used to identify commercial
software program
A computer program is a sequence or set of instructions in a programming language for a computer to execute. Computer programs are one component of software, which also includes documentation and other intangible components.
A computer program ...
s and are related to the
brand identity
A brand is a name, term, design, symbol or any other feature that distinguishes one seller's good or service from those of other sellers. Brands are used in business, marketing, and advertising for recognition and, importantly, to create a ...
of a company or software. These commercial icons serve as functional links on the system to the program or data files created by a specific software provider. Although icons are usually depicted in
graphical user interface
The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inste ...
s, icons are sometimes rendered in a
TUI using special characters such as
MouseText
MouseText is a set of 32 graphical characters designed by Bruce Tognazzini and first implemented in the Apple IIc. They were then retrofitted to the Apple IIe forming part of the Enhanced IIe upgrade. A slightly revised version was then released wi ...
or
PETSCII
PETSCII (''PET Standard Code of Information Interchange''), also known as CBM ASCII, is the character set used in Commodore Business Machines (CBM)'s 8-bit home computers, starting with the PET from 1977 and including the C16, C64, C116, C1 ...
.
The design of all computer icons is constricted by the limitations of the device display. They are limited in size, with the standard size about a
thumbnail
Thumbnails are reduced-size versions of pictures or videos, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words. In the age of digital images, visual search engines and image ...
for both
desktop computer
A desktop computer (often abbreviated desktop) is a personal computer designed for regular use at a single location on or near a desk due to its size and power requirements. The most common configuration has a case that houses the power supply ...
systems and mobile devices. They are frequently scalable, as they are displayed in different positions in the software, a single icon file such as the
Apple Icon Image format
The Apple Icon Image format is an icon format used in Apple Inc.'s macOS. It supports icons of 16 × 16, 32 × 32, 48 × 48, 128 × 128, 256 × 256, 512 × 512 points at 1x and 2x scale, with both 1- and 8-bit alpha channels and multiple image ...
can include multiple versions of the same icon optimized to work at a different size, in colour or grayscale as well as on dark and bright backgrounds.
The colors used, of both the image and the icon background, should stand out on different system backgrounds and among each other. The detailing of the icon image needs to be simple, remaining recognizable in varying graphical resolutions and screen sizes. Computer icons are by definition language-independent but often not culturally independent; they do not rely on letters or words to convey their meaning. These visual parameters place rigid limits on the design of icons, frequently requiring the skills of a
graphic artist
A graphic designer is a professional within the graphic design and graphic arts industry who assembles together images, typography, or motion graphics to create a piece of design. A graphic designer creates the graphics primarily for published, p ...
in their development.
Because of their condensed size and versatility, computer icons have become a mainstay of user interaction with electronic media. Icons also provide rapid entry into the system functionality. On most systems, users can create and delete, replicate,
select, click or double-click standard computer icons and
drag them to new positions on the screen to create a customized user environment.
Types
Standardized electrical device symbols
A series of recurring computer icons are taken from the broader field of standardized symbols used across a wide range of electrical equipment. Examples of these are the
power symbol
A power symbol is a symbol indicating that a control activates or deactivates a particular device. Such a control may be a rocker switch, a toggle switch, a push-button, a virtual switch on a display screen, or some other user interface. The ...
and the USB icon, which are found on a wide variety of electronic devices. The standardization of electronic icons is an important safety-feature on all types of electronics, enabling a user to more easily navigate an unfamiliar system. As a subset of electronic devices, computer systems and mobile devices use many of the same icons; they are corporated into the design of both the computer hardware and on the software. On the hardware, these icons identify the functionality of specific buttons and plugs. In the software, they provide a link into the customizable settings.
System warning icons also belong to the broader area of ISO standard warning signs. These warning icons, first designed to regulate automobile traffic in the early 1900s, have become standardized and widely understood by users without the necessity of further verbal explanations. In designing software operating systems, different companies have incorporated and defined these standard symbols as part of their graphical user interface. For example, the Microsoft MSDN defines the standard icon use of error, warning, information and question mark icons as part of their software development guidelines.
Different organizations are actively involved in standardizing these icons, as well as providing guidelines for their creation and use. The International Electrotechnical Commission (IEC) has defined "Graphical symbols for use on equipment", published as IEC 417, a document which displays IEC standardized icons. Another organization invested in the promotion of effective icon usage is the ICT (information and communications technologies), which has published guidelines for the creation and use of icons.
Many of these icons are available on the Internet, either to purchase or as freeware to incorporate into new software.
Metaphorical icons
An icon is a
Signifier
In semiotics, signified and signifier (French: ''signifié'' and ''signifiant'') stand for the two main components of a sign, where ''signified'' pertains to the "plane of content", while ''signifier'' is the "plane of expression". The idea was f ...
pointing to a
Signified
In semiotics, signified and signifier ( French: ''signifié'' and ''signifiant'') stand for the two main components of a sign, where ''signified'' pertains to the "plane of content", while ''signifier'' is the "plane of expression". The idea was ...
.
Easily comprehendible icons will make use of familiar visual metaphors directly connected to the Signified: actions the icon initiate or the content that would be revealed.
Metaphors
A metaphor is a figure of speech that, for rhetorical effect, directly refers to one thing by mentioning another. It may provide (or obscure) clarity or identify hidden similarities between two different ideas. Metaphors are often compared with ...
,
Metonymy
Metonymy () is a figure of speech in which a concept is referred to by the name of something closely associated with that thing or concept.
Etymology
The words ''metonymy'' and ''metonym'' come from grc, μετωνυμία, 'a change of name' ...
and
Synecdoche
Synecdoche ( ) is a type of metonymy: it is a figure of speech in which a term for a part of something is used to refer to the whole (''pars pro toto''), or vice versa (''totum pro parte''). The term comes from Greek .
Examples in common Engl ...
are used to encode the meaning in an icon system.
The Signified can have multiple natures: virtual objects such as
File
File or filing may refer to:
Mechanical tools and processes
* File (tool), a tool used to ''remove'' fine amounts of material from a workpiece
**Filing (metalworking), a material removal process in manufacturing
** Nail file, a tool used to gent ...
s and
Applications
Application may refer to:
Mathematics and computing
* Application software, computer software designed to help the user to perform specific tasks
** Application layer, an abstraction layer that specifies protocols and interface methods used in a c ...
, actions within a system or an application (e.g. snap a picture, delete, rewind, connect/disconnect etc...), action in the physical world (e.g. print, eject DVD, change volume or brightness etc...) as well as physical objects (e.g.
monitor
Monitor or monitor may refer to:
Places
* Monitor, Alberta
* Monitor, Indiana, town in the United States
* Monitor, Kentucky
* Monitor, Oregon, unincorporated community in the United States
* Monitor, Washington
* Monitor, Logan County, West ...
,
compact disk
The compact disc (CD) is a digital optical disc data storage format that was co-developed by Philips and Sony to store and play digital audio recordings. In August 1982, the first compact disc was manufactured. It was then released in October ...
,
mouse
A mouse ( : mice) is a small rodent. Characteristically, mice are known to have a pointed snout, small rounded ears, a body-length scaly tail, and a high breeding rate. The best known mouse species is the common house mouse (''Mus musculus' ...
,
printer
Printer may refer to:
Technology
* Printer (publishing), a person or a company
* Printer (computing), a hardware device
* Optical printer for motion picture films
People
* Nariman Printer (fl. c. 1940), Indian journalist and activist
* James ...
etc...).
The Desktop metaphor
A subgroup of the more visually rich icons is based on objects lifted from a 1970 physical office space and desktop environment. It includes the basic icons used for a file, file folder, trashcan, inbox, together with the spatial real estate of the screen, i.e. the electronic desktop. This model originally enabled users, familiar with common office practices and functions, to intuitively navigate the computer desktop and system. (Desktop Metaphor, pg 2). The icons stand for objects or functions accessible on the system and enable the user to do tasks common to an office space. These desktop computer icons developed over several decades; data files in the 1950s, the hierarchical storage system (i.e. the file folder and filing cabinet) in the 1960s, and finally the
desktop metaphor
In computing, the desktop metaphor is an interface metaphor which is a set of unifying concepts used by graphical user interfaces to help users interact more easily with the computer. The desktop metaphor treats the computer monitor as if it is t ...
itself (including the trashcan) in the 1970s.
[Victor Kaptelinin and Mary Czerwinski (2007). "Introduction: The Desktop Metaphor and New Uses of Technology ", pg 2 ff. in "Beyond the Desktop Metaphor: Designing Integrated Digital Work Environments". MIT Press, Cambridge, Massachusetts.]
Dr. David Canfield Smith associated the term "icon" with computing in his landmark 1975 PhD thesis "Pygmalion: A Creative Programming Environment". In his work, Dr. Smith envisioned a scenario in which "visual entities", called icons, could execute lines of programming code, and save the operation for later re-execution. Dr. Smith later served as one of the principal designers of the
Xerox Star
The Xerox Star workstation, officially named Xerox 8010 Information System, is the first commercial personal computer to incorporate technologies that have since become standard in personal computers, including a bitmapped display, a window-based ...
, which became the first commercially available personal computing system based on the desktop metaphor when it was released in 1981. "The icons on
he desktopare visible concrete embodiments of the corresponding physical objects." The desktop and icons displayed in this first desktop model are easily recognizable by users several decades later, and display the main components of the desktop metaphor GUI.
This model of the desktop metaphor has been adopted by most personal computing systems in the last decades of the 20th century; it remains popular as a "simple intuitive navigation by single user on single system."
It is only at the beginning of the 21st century that personal computing is evolving a new metaphor based on Internet connectivity and teams of users,
cloud computing
Cloud computing is the on-demand availability of computer system resources, especially data storage ( cloud storage) and computing power, without direct active management by the user. Large clouds often have functions distributed over mul ...
. In this new model, data and tools are no longer stored on the single system, instead they are stored someplace else, "in the cloud". The cloud metaphor is replacing the desktop model; it remains to be seen how many of the common desktop icons (file, file folder, trashcan, inbox, filing cabinet) find a place in this new metaphor.
Brand icons for commercial software
A further type of computer icon is more related to the
brand
A brand is a name, term, design, symbol or any other feature that distinguishes one seller's good or service from those of other sellers. Brands are used in business, marketing, and advertising for recognition and, importantly, to create an ...
identity of the software programs available on the computer system. These brand icons are bundled with their product and installed on a system with the software. They function in the same way as the hyperlink icons described above, representing functionality accessible on the system and providing links to either a software program or data file. Over and beyond this, they act as a company identifier and advertiser for the software or company.
Because these company and program
logo
A logo (abbreviation of logotype; ) is a graphic mark, emblem, or symbol used to aid and promote public identification and recognition. It may be of an abstract or figurative design or include the text of the name it represents as in a wordma ...
s represent the company and product itself, much attention is given to their design, done frequently by commercial artists. To regulate the use of these brand icons, they are
trademark
A trademark (also written trade mark or trade-mark) is a type of intellectual property consisting of a recognizable sign, design, or expression that identifies products or services from a particular source and distinguishes them from others ...
registered and are considered part of the company intellectual property.
In closed systems such as
iOS
iOS (formerly iPhone OS) is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that powers many of the company's mobile devices, including the iPhone; the term also include ...
and
Android, the use of icons is to a degree regulated or guided
to create a sense of consistency in the
UI.
Overlay icons
On some GUI systems (e.g. Windows), on an icon which represents an object (e.g. a file) a certain additional subsystem can add a smaller secondary icon, laid over the primary icon and usually positioned in one of its corners, to indicate the status of the object which is represented with the primary icon. For instance, the subsystem for locking files can add a "padlock" overlay icon on an icon which represents a file in order to indicate that the file is locked.
Placement and spacing
In order to display the number of icons representing the growing complexity offered on a device, different systems have come up with different solutions for screen space management. The computer monitor continues to display primary icons on the main page or desktop, allowing easy and quick access to the most commonly used functions for a user. This screen space also invites almost immediate user customization, as the user adds favourite icons to the screen and groups related icons together on the screen. Secondary icons of system programs are also displayed on the
task bar
A taskbar is an Graphical user interface elements, element of a graphical user interface which has various purposes. It typically shows which computer program, programs are currently running.
The specific design and layout of the taskbar varies be ...
or the system
dock. These secondary icons do not provide a link like the primary icons, instead, they are used to show availability of a tool or file on the system.
Spatial management techniques play a bigger role in mobile devices with their much smaller screen real estate. In response, mobile devices have introduced, among other visual devices, scrolling screen displays and selectable tabs displaying groups of related icons. Even with these evolving display systems, the icons themselves remain relatively constant in both appearance and function.
Above all, the icon itself must remain clearly identifiable on the display screen regardless of its position and size. Programs might display their icon not only as a desktop hyperlink, but also in the program title bar, on the Start menu, in the Microsoft tray or the Apple dock. In each of these locations, the primary purpose is to identify and advertise the program and functionality available. This need for recognition in turn sets specific design restrictions on effective computer icons.
Design
![icons example](https://upload.wikimedia.org/wikipedia/commons/3/38/Icons_example.png)
In order to maintain consistency in the look of a device, OS manufacturers offer detailed guidelines for the development and use of icons on their systems. This is true for both standard system icons and third party application icons to be included in the system. The system icons currently in use have typically gone through widespread international acceptance and understandability testing. Icon design factors have also been the topic for extensive usability studies. The design itself involves a high level of skill in combining an attractive graphic design with the required usability features.
Shape
The icon needs to be clear and easily recognizable, able to display on monitors of widely varying size and resolutions. Its shape should be simple with clean lines, without too much detailing in the design. Together with the other design details, the shape also needs to make it unique on the display and clearly distinguishable from other icons.
Color
The icon needs to be colorful enough to easily pick out on the display screen, and contrast well with any background. With the increasing ability to customize the desktop, it is important for the icon itself to display in a standard color which cannot be modified, retaining its characteristic appearance for immediate recognition by the user. Through color it should also provide some visual indicator as to the icon state; activated, available or currently not accessible ("greyed out").
Size and scalability
The standard icon is generally the size of an adult thumb, enabling both easy visual recognition and use in a
touchscreen
A touchscreen or touch screen is the assembly of both an input ('touch panel') and output ('display') device. The touch panel is normally layered on the top of an electronic visual display of an information processing system. The display is often ...
device. For individual devices the display size correlates directly to the size of the screen real estate and the resolution of the display. Because they are used in multiple locations on the screen, the design must remain recognizable at the smallest size, for use in a directory tree or title bar, while retaining an attractive shape in the larger sizes. In addition to scaling, it may be necessary to remove visual details or simplify the subject between discrete sizes. Larger icons serve also as part of the accessibility features for the visually impaired on many computer systems. The width and height of the icon are the same (1:1
aspect ratio) in almost all areas of traditional use.
Motion
Icons can also be augmented with iconographic motion - geometric manipulations applied to a graphical element over time, for example, a scale, rotation, or other deformation. One example is when application icons "wobble" in iOS to convey to the user they are able to be repositioned by being dragged. This is different from an icon with animated graphics, such as a
Throbber
A throbber, also known as a loading icon, is an animated graphical control element used to show that a computer program is performing an action in the background (such as downloading content, conducting intensive calculations or communicating w ...
. In contrast to static icons and icons with animated graphics, kinetic behaviors do not alter the visual content of an element (whereas fades, blurs, tints, and addition of new graphics, such as badges, exclusively alter an icon's pixels). Stated differently, pixels in an icon can be moved, rotated, stretched, and so on - but not altered or added to. Research has shown iconographic motion can act as a powerful and reliable visual cue, a critical property for icons to embody.
Localization
In its primary function as a symbolic image, the icon design should ideally be divorced from any single language. For products which are targeting the international marketplace, the primary design consideration is that the icon is non-verbal; localizing text in icons is costly and time-consuming.
Cultural context
Beyond text, there are other design elements which can be dependent upon the cultural context for interpretation. These include color, numbers, symbols, body parts and hand gestures. Each of these elements needs to be evaluated for their meaning and relevance across all markets targeted by the product.
Related visual tools
Other graphical devices used in the computer user interface fulfill GUI functions on the system similar to the computer icons described above. However each of these related graphical devices differs in one way or another from the standard computer icon.
Windows
The graphical windows on the computer screen share some of the visual and functional characteristics of the computer icon. Windows can be minimized to an icon format to serve as a hyperlink to the window itself. Multiple windows can be open and even overlapping on the screen. However where the icon provides a single button to initiate some function, the principal function of the window is a workspace, which can be minimized to an icon hyperlink when not in use.
Control widgets
Over time, certain
GUI widget
A graphical widget (also graphical control element or control) in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct ...
s have gradually appeared which are useful in many contexts. These are graphical controls which are used across computer systems and can be intuitively manipulated by the user even in a new context because the user recognises them from having seen them in a more familiar context. Examples of these control widgets are scroll bars, sliders, listboxes and buttons used in many programs. Using these widgets, a user is able to define and manipulate the data and the display for the software program they are working with. The first set of computer widgets was originally developed for the Xerox Alto. Now they are commonly bundled in widget toolkits and distributed as part of a development package. These control widgets are standardized pictograms used in the graphical interface, they offer an expanded set of user functionalities beyond the hyperlink function of computer icons.
Emoticons
Another GUI icon is exemplified by the
smiley
A smiley, sometimes referred to as a smiley face, is a basic ideogram that represents a smiling face. Since the 1950s it has become part of popular culture worldwide, used either as a standalone ideogram, or as a form of communication, such a ...
face, a pictogram embedded in a
text message
Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/ laptops, or another type of compatible comput ...
. The smiley, and by extension other
emoticon
An emoticon (, , rarely , ), short for "emotion icon", also known simply as an emote, is a pictorial representation of a facial expression using Character (symbol), characters—usually punctuation marks, numbers, and letters—to express a ...
s, are used in computer text to convey information in a non-verbal binary shorthand, frequently involving the emotional context of the message. These icons were first developed for computers in the 1980s as a response to the limited storage and transmission bandwidth used in electronic messaging. Since then they have become both abundant and more sophisticated in their keyboard representations of varying emotions. They have developed from keyboard character combinations into real icons. They are widely used in all forms of electronic communications, always with the goal of adding context to the verbal content of the message. In adding an emotional overlay to the text, they have also enabled electronic messages to substitute for and frequently supplant voice-to-voice messaging.
These emoticons are very different from the icon hyperlinks described above. They do not serve as links, are not part of any system function or computer software. Instead they are part of the communication language of users across systems. For these computer icons, customization and modifications are not only possible but in fact expected of the user.
Hyperlinks
A text hyperlink performs much the same function as the functional computer icon: it provides a direct link to some function or data available on the system. Although they can be customized, these text hyperlinks generally share a standardized recognizable format, blue text with underlining. Hyperlinks differ from the functional computer icons in that they are normally embedded in text, whereas icons are displayed as stand-alone on the screen real estate. They are also displayed in text, either as the link itself or a friendly name, whereas icons are defined as being primarily non-textual.
Icon creation
Because of the design requirements, icon creation can be a time-consuming and costly process. There are a plethora of icon creation tools to be found on the Internet, ranging from professional level tools through utilities bundled with software development programs to stand-alone freeware. Given this wide availability of icon tools and icon sets, a problem can arise with custom icons which are mismatched in style to the other icons included on the system.
Tools
Icons underwent a change in appearance from the early 8-bit
pixel art
Pixel art () is a form of digital art drawn with graphics software, graphical software where images are built using pixels as the only building block. It is widely associated with the low-resolution graphics from 8-bit and 16-bit era computers a ...
used pre-2000 to a more photorealistic appearance featuring effects such as softening, sharpening, edge enhancement, a glossy or glass-like appearance, or drop shadows which are rendered with an
alpha channel
In computer graphics, alpha compositing or alpha blending is the process of combining one image with a background to create the appearance of partial or full transparency. It is often useful to render picture elements (pixels) in separate pas ...
.
Icon editors used on these early platforms usually contain a rudimentary
raster image editor
A raster graphics editor is a computer program that allows users to create and edit images interactively on the computer screen and save them in one of many raster graphics file formats (also known as bitmap images) such as JPEG, PNG, and GI ...
capable of modifying images of an icon pixel by pixel, by using simple drawing tools, or by applying simple image filters. Professional icon designers seldom modify icons inside an icon editor and use a more advanced drawing or 3D modeling application instead.
The main function performed by an icon editor is generation of icons from images. An icon editor resamples a source image to the resolution and color depth required for an icon. Other functions performed by icon editors are icon extraction from executable files (exe, dll), creation of icon libraries, or saving individual images of an icon.
All icon editors can make icons for system files (folders, text files, etc.), and for web pages.
These have a file extension of .
ICO
is an action-adventure game developed by Japan Studio and Team Ico, and published by Sony Computer Entertainment, released for the PlayStation 2 video game console in 2001 and 2002 in various regions. It was designed and directed by Fumito U ...
for Windows and web pages or .
ICNS for the Macintosh. If the editor can also make a cursor, the image can be saved with a file extension of .
CUR
A cur was a dog breed used by cattle drovers in England.
The breed is now extinct. In the United States a short-haired dog used in hunting and herding is called "cur-tailed", or "cur" for short.
In modern speech, the term ''cur'' is usually u ...
or .
ANI
Ani ( hy, Անի; grc-gre, Ἄνιον, ''Ánion''; la, Abnicum; tr, Ani) is a ruined medieval Armenian city now situated in Turkey's province of Kars, next to the closed border with Armenia.
Between 961 and 1045, it was the capital of the ...
for both Windows and the Macintosh. Using a new icon is simply a matter of moving the image into the correct file folder and using the system tools to select the icon. In Windows XP you could go to My Computer, open Tools on the explorer window, choose Folder Options, then File Types, select a file type, click on Advanced and select an icon to be associated with that file type.
Developers also use icon editors to make icons for specific program files. Assignment of an icon to a newly created program is usually done within the
Integrated Development Environment
An integrated development environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of at least a source code editor, build automation tools a ...
used to develop that program. However, if one is creating an application in the
Windows API
The Windows API, informally WinAPI, is Microsoft's core set of application programming interfaces (APIs) available in the Microsoft Windows operating systems. The name Windows API collectively refers to several different platform implementations th ...
he or she can simply add a line to the program's resource script before compilation. Many icon editors can copy a unique icon from a program file for editing. Only a few can assign an icon to a program file, a much more difficult task.
Simple icon editors and image-to-icon converters are also available online as
web application
A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection.
History
In earlier computing models like client-serve ...
s.
List of tools
This is a list of notable computer icon software.
*
Axialis IconWorkshop – Supports both Windows and Mac icons. (Commercial, Windows)
*
IcoFX
IcoFX is an icon creation software for Microsoft Windows. Previously a freeware, it allows editing multiple formats of icons with support for transparency. Icons can also be converted from one format to another, for instance from a Macintosh icon ...
– Icon editor supporting Windows Vista and Macintosh icons with PNG compression (Commercial, Windows)
*
IconBuilder
IconBuilder is a popularLarry Ullman, Marc Liyanage, ''Mac OS X Panther timesaving techniques for dummies'', For Dummies, 2004, , p127/ref> plugin for Adobe Photoshop, Adobe Photoshop Elements and Macromedia Fireworks for the editing and creat ...
– Plug-in for Photoshop; focused on Mac. (Commercial, Windows/Mac)
*
Microangelo Toolset
Microangelo Toolset is a collection of software utilities (Studio, Explorer, Librarian, Animator, On Display) for editing Microsoft Windows computer icons and pointers.
Microangelo Toolset is one of the best known icon editing and creation softw ...
– a set of tools (Studio, Explorer, Librarian, Animator, On Display) for editing Windows icons and cursors. (Commercial, Windows)
*
Microsoft Visual Studio
Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to develop computer programs including websites, web apps, web services and mobile apps. Visual Studio uses Microsoft software development platforms such a ...
- can author
ICO/CUR files but cannot edit 32-bit icon frames with 8-bit transparency.
(Commercial, Windows)
The following is a list of raster graphic applications capable of creating and editing icons:
*
GIMP
GIMP ( ; GNU Image Manipulation Program) is a free and open-source raster graphics editor used for image manipulation (retouching) and image editing, free-form drawing, transcoding between different image file formats, and more specialized task ...
– Image Editor Supports reading and writing Windows
ICO/CUR/
ANI
Ani ( hy, Անի; grc-gre, Ἄνιον, ''Ánion''; la, Abnicum; tr, Ani) is a ruined medieval Armenian city now situated in Turkey's province of Kars, next to the closed border with Armenia.
Between 961 and 1045, it was the capital of the ...
files and
PNG files that can be converted to Mac
.icns files. (
Open Source
Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use the source code, design documents, or content of the product. The open-source model is a decentralized sof ...
,
Free Software
Free software or libre software is computer software distributed under terms that allow users to run the software for any purpose as well as to study, change, and distribute it and any adapted versions. Free software is a matter of liberty, no ...
,
Multi-Platform
In computing, cross-platform software (also called multi-platform software, platform-agnostic software, or platform-independent software) is computer software that is designed to work in several computing platforms. Some cross-platform software ...
)
*
ImageMagick
ImageMagick, invoked from the command line as magick, is a free and open-source cross-platform software suite for displaying, creating, converting, modifying, and editing raster images. Created in 1987 by John Cristy, it can read and write ove ...
and
GraphicsMagick
GraphicsMagick is a fork of ImageMagick, emphasizing stability of both programming API and command-line options. It was branched off ImageMagick's version 5.5.2 in 2002 after irreconcilable differences emerged in the developers' group.
In additi ...
– Command Line image conversion & generation that can be used to create
Windows ICO files and
PNG files that can be converted to Mac
.ICNS files. (
Open Source
Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use the source code, design documents, or content of the product. The open-source model is a decentralized sof ...
,
Free Software
Free software or libre software is computer software distributed under terms that allow users to run the software for any purpose as well as to study, change, and distribute it and any adapted versions. Free software is a matter of liberty, no ...
,
Multi-Platform
In computing, cross-platform software (also called multi-platform software, platform-agnostic software, or platform-independent software) is computer software that is designed to work in several computing platforms. Some cross-platform software ...
)
*
IrfanView
IrfanView () is an image viewer, editor, organiser and converter program for Microsoft Windows. It can also play video and audio files, and has some image creation and painting capabilities. IrfanView is free for non-commercial use; commercial u ...
– Support converting graphic file formats into Windows ICO files. (Proprietary, free for non-commercial use, Windows)
*
ResEdit
ResEdit is a discontinued developer tool application for the Apple Macintosh, used to create and edit resources directly in the Mac's resource fork architecture. It was an alternative to tools such as REdit, and the resource compiler ''Rez.'' Fo ...
– Supports creating
classic Mac OS
Mac OS (originally System Software; retronym: Classic Mac OS) is the series of operating systems developed for the Macintosh family of personal computers by Apple Computer from 1984 to 2001, starting with System 1 and ending with Mac OS 9. The ...
icon
resources
Resource refers to all the materials available in our environment which are technologically accessible, economically feasible and culturally sustainable and help us to satisfy our needs and wants. Resources can broadly be classified upon their av ...
. (Proprietary, Discontinued, Classic Mac OS)
See also
*
Apple Icon Image format
The Apple Icon Image format is an icon format used in Apple Inc.'s macOS. It supports icons of 16 × 16, 32 × 32, 48 × 48, 128 × 128, 256 × 256, 512 × 512 points at 1x and 2x scale, with both 1- and 8-bit alpha channels and multiple image ...
*
Distinguishable interfaces
*
Earcon An earcon is a brief, distinctive sound that represents a specific event or conveys other information. Earcons are a common feature of computer operating systems and applications, ranging from a simple beep to indicate an error, to the customizable ...
*
Favicon
A favicon (; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page. A web designer can create s ...
*
Font Awesome
Font Awesome is a font and Icon (computing), icon toolkit based on CSS and Less (stylesheet language), Less. As of 2020, Font Awesome was used by 38% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fo ...
*
ICO (file format)
The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately. In Windows, all executables that ...
*
Icon design 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 o ...
*
Iconfinder
*
Resource (Windows) In Microsoft Windows, resources are file system permissions, read-only data (computing), data embedded in portable executable files like .exe, Dynamic-link library, DLL, Control Panel (Windows), CPL, Screen Saver (Windows), SCR, Device Driver (Windo ...
*
Semasiography
Semasiography (from el, σημασία (semasia) "signification, meaning" and el, γραφία (graphia) "writing") is "writing with signs", a non-phonetic based technique to "communicate information without the necessary intercession of forms ...
*
The Noun Project
*
Unicode symbols
In computing, a Unicode symbol is a Unicode character which is not part of a script used to write a natural language, but is nonetheless available for use as part of a text.
Many of the symbols are drawn from existing character sets or ISO/IEC or ...
*
WIMP (computing)
In human–computer interaction, WIMP stands for "windows, icons, menus, pointer", denoting a style of interaction using these elements of the user interface. Other expansions are sometimes used, such as substituting "mouse" and "mice" for me ...
*
XPM
References
Further reading
* Wolf, Alecia. 2000. "Emotional Expression Online: Gender Differences in Emoticon
* Katz, James E., editor (2008). ''Handbook of Mobile Communication Studies''. MIT Press, Cambridge, Massachusetts.
* Levine, Philip and Scollon, Ron, editors (2004). ''Discourse & Technology: Multimodal Discourse Analysis''. Georgetown University Press, Washington, D.C.
* Abdullah, Rayan and Huebner, Roger (2006). ''Pictograms, Icons and Signs: A Guide to Information Graphics''. Thames & Hudson, London.
* Handa, Carolyn (2004). ''Visual Rhetoric in a Digital World: A Critical Sourcebook''. Bedford / St. Martins, Boston.
* Zenon W. Pylyshyn and Liam J. Bannon (1989). ''Perspectives on the Computer Revolution''. Ablex, New York.
External links
*
*
{{Authority control
Graphical user interface elements
Pictograms