View source for Icon (computing)

{{Short description|Ideogram used in computing}}
{{Multiple issue|
{{Verify sources|date=June 2025}}
{{Self-contradictory|date=June 2025|about=the scope of what qualifies as an icon|1=article}}
{{Rewrite|date=June 2025}}
}}
{{multiple image
| footer   = [[Desktop metaphor|Desktop]] icons for file/data transfer, clock/awaiting, and running a program.
| width    = 100

| image1   = Data-transfer.svg

| image2   = Awaiting.svg

| image3   = Run.svg
}}
In [[computing]], an '''icon''' is a [[pictogram]] or [[ideogram]] displayed on a [[computer screen]] in order to help the user navigate a [[computer system]]. It can serve as an electronic [[hyperlink]] or [[file shortcut]] to access the program or data. The user can activate an icon using a mouse, pointer, finger, or [[voice command]]s. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage.<ref name="ICT Pictograms, Icons and Symbols ">{{cite web|url=http://www.tiresias.org/research/guidelines/pictograms.htm|title=''ICT Pictograms, Icons and Symbols'', 10 May 2011|access-date=1 June 2011|archive-date=1 August 2013|archive-url=https://web.archive.org/web/20130801075835/http://www.tiresias.org/research/guidelines/pictograms.htm|url-status=dead}}</ref> 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]] of a computer system, in conjunction with [[window (computing)|windows]], [[Menu (computing)|menus]] and a [[pointing device]] (mouse), belong to the much larger topic of the [[history of the graphical user interface]] that has largely supplanted the [[text-based interface]] for casual use.

== Overview ==
{{Original research section|date=June 2025}}
The computing definition of "icon" can include three distinct [[Semiotics|semiotical]] elements: 
[[Pictogram|Icon]], which resembles its referent (such as a road sign for falling rocks).
This category includes [[Stylization|stylized]] drawings of objects from the office environment or from other professional areas such as printers, scissors, file cabinets and folders.

[[Index (disambiguation)#Computer science|Index]], which is associated with its referent (smoke is a sign of fire).
This category includes [[Stylization|stylized]] drawings used to refer to actions "[[printer (computing)|printer]]" and "print", "[[scissors]]" and "[[Cutting|cut]]" or "[[magnifying glass]]" and "search".

[[Symbol]], 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]]s, such as the [[power symbol|power on/off symbol]] and the USB icon. 

The majority of icons are encoded and decoded using [[metonymy]], [[synecdoche]], and [[metaphor]].
[[File:Media-floppy.svg|thumb|upright|The {{frac|3|1|2}}-inch [[floppy disk]] was ubiquitous for data storage in the late 20th century, and still continues to be used to represent the save function. This is an example of a [[skeuomorph]].]]

An example of [[metaphorical]] representation characterizes all the major desktop-based computer systems including the [[Icon (computing)#Desktop metaphor icons|desktop]] 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]] 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]] is in itself a subset of metaphors that use one entity to point to another related to it such as using a [[fluorescent bulb]] instead of a filament one to represent power saving settings.

[[Synecdoche]] 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]] for the entire [[audio system]] settings.

The design of all computer icons is constricted by the limitations of the device display. They are limited in size, with the standard size of about a [[thumbnail]] for both [[desktop computer]] 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]] 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.

== Types ==

=== Standardized electrical device symbols ===

[[File:USB icon.svg|thumb|A standardized icon for a USB connection]]
[[File:Power_icon_(the_Noun_Project_35084).svg|thumb|upright|The standard [[Power symbol|power icon]]]]
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]] 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.<ref>{{cite web|url=http://saadraja.co/7-tips-for-ui-design/|archive-url=https://web.archive.org/web/20171206074605/http://saadraja.co/7-tips-for-ui-design/|url-status=dead|archive-date=December 6, 2017|title=Saad Raja - 7 tips for UI design|website=saadraja.co|language=en-US|access-date=2017-12-05}}</ref> In the software, they provide a link into the customizable settings.<ref>{{Cite web |url=http://eetd.lbl.gov/Controls/publications/switch5.pdf |title=''Power Switch Labeling for Medical and Other Devices'', 10 May 2011 |access-date=1 June 2011 |archive-url=https://web.archive.org/web/20110927151016/http://eetd.lbl.gov/Controls/publications/switch5.pdf |archive-date=27 September 2011 |url-status=dead }}</ref>

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<ref>{{cite web|url=https://docs.microsoft.com/en-us/windows/desktop/uxguide/vis-std-icons|title=Standard Icons - Windows applications|last=windows-sdk-content|website=docs.microsoft.com|date=9 February 2021 }}</ref> defines the standard icon use of error, warning, information and question mark icons as part of their software development guidelines.<ref>{{cite web|url=http://msdn.microsoft.com/en-us/library/aa511277.aspx|title=''MSDN Standard Icons'', 10 May 2011}}</ref>

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.<ref name="ICT Pictograms, Icons and Symbols "/> 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]]'' pointing to the ''signified''. 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]], [[metonymy]] and [[synecdoche]] are used to encode the meaning in an icon system.

The ''signified'' can have multiple natures: virtual objects such as [[Computer file|file]]s and [[Application software|applications]], 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. [[Computer monitor|monitor]], [[compact disk]], [[Computer mouse|mouse]], [[printer (computing)|printer]] 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]] itself (including the trashcan) in the 1970s.<ref name="Beyond the Desktop Metaphor">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.</ref>

[[David Canfield Smith|Dr. David Canfield Smith]] associated the term "icon" with computing in his landmark 1975 PhD thesis "Pygmalion: A Creative Programming Environment".<ref>{{cite web|url=http://worrydream.com/refs/Smith%20-%20Pygmalion.pdf|title=Pygmalion: A Creative Programming Environment|website=worrydream.com}}</ref><ref>{{cite web|url=https://scs.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=9d5772a9-08ed-493a-a472-6d67cbd44dc0|title=Lecture 6 Guest Lecture (David Canfield Smith)|via=scs.hosted.panopto.com}}</ref> 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.<ref>{{cite web|url=http://acypher.com/wwid/Chapters/01Pygmalion.html|title=Pygmalion|website=acypher.com}}</ref> Dr. Smith later served as one of the principal designers of the [[Xerox Star]], which became the first commercially available personal computing system based on the desktop metaphor when it was released in 1981. "The icons on [the desktop] are visible concrete embodiments of the corresponding physical objects."<ref>{{cite web|url=https://guidebookgallery.org/articles/designingthestaruserinterface|title=GUIdebook > Articles > "Designing the Star User Interface"|website=guidebookgallery.org}}</ref> 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."<ref name="Beyond the Desktop Metaphor"/> 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]].  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]] 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.<ref>Rudolph Arnheim (1969).  "Pictures, Symbols and Signs", pg 144 ff. in Handa, ''Visual Rhetoric in a Digital World''. Bedford / St. Martins, Boston.</ref>

Because these company and program [[logo]]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]] registered and are considered part of the company's intellectual property.

In closed systems such as [[iOS]] and [[Android (operating system)|Android]], the use of icons is to a degree regulated or guided 
<ref>{{cite web|url=https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/|title=Custom Icons - Icons and Images - iOS - Human Interface Guidelines - Apple Developer|website=developer.apple.com}}</ref> to create a sense of consistency in the [[User interface|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.

== 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.<ref>{{cite web|url=http://www.dmoz.org/Computers/Software/Desktop_Customization/Utilities/Icons/|title=''Open Dictionary Desktop Customization: Icons'', 10 May 2011}}</ref> 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]] 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]].

Icon editors used on these early platforms usually contain a rudimentary [[raster image editor]] 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 (icon image file format)|ICO]] for Windows and web pages or .[[Apple Icon Image|ICNS]] for the Macintosh. If the editor can also make a cursor, the image can be saved with a file extension of .[[ICO (icon image file format)|CUR]] or .[[ANI (file format)|ANI]] 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]] used to develop that program. However, if one is creating an application in the [[Windows API]] 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. There are also resource editing tools that allow users to extract or replace icons embedded in Windows executable files, such as [[Resource Hacker]] or [[Resource Tuner]].

Simple icon editors and image-to-icon converters are also available online as [[web application]]s.

=== List of tools ===
{{See also|List of 2D graphics software}}
<!-- [[List of icon software]] redirects here -->
This is a list of notable computer icon software.
* [[Axialis IconWorkshop]] – Supports both Windows and Mac icons. (Commercial, Windows)
* [[IcoFX]] – Icon editor supporting Windows Vista and Macintosh icons with PNG compression (Commercial, Windows)
* [[IconBuilder]] – Plug-in for Photoshop; focused on Mac. (Commercial, Windows/Mac)
* [[Microangelo Toolset]] – a set of tools (Studio, Explorer, Librarian, Animator, On Display) for editing Windows icons and cursors. (Commercial, Windows)
* [[Visual Studio|Microsoft Visual Studio]] - can author [[ICO (file format)|ICO/CUR]] files but cannot edit 32-bit icon frames with 8-bit transparency.<ref>{{cite web |title=Resource editors - Image Editor for Icons (C++) |url=https://learn.microsoft.com/cpp/windows/image-editor-for-icons |website=Microsoft Learn |date=11 November 2021 |access-date=29 November 2022 |language=en-us}}</ref> (Commercial, Windows)

The following is a list of raster graphic applications capable of creating and editing icons:
* [[GIMP]] – Image Editor Supports reading and writing Windows [[ICO (file format)|ICO/CUR]]/[[ANI (file format)|ANI]] files and [[Portable Network Graphics|PNG]] files that can be converted to Mac [[Apple Icon Image format|.icns files]]. ([[Open-source software|Open Source]], [[Free software|Free Software]], [[Cross-platform|Multi-Platform]])
* [[ImageMagick]] and [[GraphicsMagick]] – Command Line image conversion & generation that can be used to create [[ICO (file format)|Windows ICO files]] and [[Portable Network Graphics|PNG]] files that can be converted to Mac [[Apple Icon Image format|.ICNS files]]. ([[Open-source software|Open Source]], [[Free software|Free Software]], [[Cross-platform|Multi-Platform]])
* [[IrfanView]] – Support converting graphic file formats into Windows ICO files. (Proprietary, free for non-commercial use, Windows)
* [[ResEdit]] – Supports creating [[classic Mac OS]] icon [[resource fork|resources]]. (Proprietary, Discontinued, Classic Mac OS)

==See also==
{{div col}}
* [[Apple Icon Image format]]
* [[Distinguishable interfaces]]
* [[Favicon]]
* [[Font Awesome]]
* [[ICO (file format)]]
* [[Icon design]]
* [[Iconfinder]]
* [[Resource (Windows)]]
* [[Semasiography]]
* [[The Noun Project]]
* [[Unicode symbols]]
* [[WIMP (computing)]]
* [[X PixMap|XPM]]
{{Div col end}}

== References ==
{{Reflist|30em}}

== 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==
*{{Commons category-inline|Software icons}}

{{Graphical control elements}}
{{Authority control}}

[[Category:Computer icons| ]]
[[Category:Graphical user interface elements]]
[[Category:Pictograms]]