In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents.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 recently voice commands. 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.
Computing is any activity that uses computers to manage, process, and communicate information for various purposes. It includes development of both hardware and software. Computing is a critical, integral component of modern industrial technology. Major computing disciplines include computer engineering, software engineering, computer science, information systems, and information technology.
A pictogram, also called a pictogramme, pictograph, or simply picto, and in computer usage an icon, is an ideogram that conveys its meaning through its pictorial resemblance to a physical object. Pictographs are often used in writing and graphic systems in which the characters are to a considerable extent pictorial in appearance. A pictogram may also be used in subjects such as leisure, tourism, and geography.
An ideogram or ideograph 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 familiarity with prior convention; others convey their meaning through pictorial resemblance to a physical object, and thus may also be referred to as pictograms.
Icons as parts of the graphical user interface of the computer system, in conjunction with windows, 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.
The graphical user interface is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, instead of text-based user interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.
In computing, a window is a graphical control element. It consists of a visual area containing some of the graphical user interface of the program it belongs to and is framed by a window decoration. It usually has a rectangular shape that can overlap with the area of other windows. It displays the output of and may allow input to one or more processes.
A pointing device is an input interface that allows a user to input spatial data to a computer. CAD systems and graphical user interfaces (GUI) allow the user to control and provide data to the computer using physical gestures by moving a hand-held mouse or similar device across the surface of the physical desktop and activating switches on the mouse. Movements of the pointing device are echoed on the screen by movements of the pointer and other visual changes. Common gestures are point and click and drag and drop.
The computing definition of "icon" can include three distinct semiotical elements:
Icon, which resembles its referent (such as a road sign for falling rocks). This category includes stylized drawings of objects from the office environment or from other professional areas such as printers, scissors, file cabinets and folders.
An icon is a religious work of art, most commonly a painting, in the cultures of the Eastern Orthodox Church, Oriental Orthodoxy, the Roman Catholic, and certain Eastern Catholic churches. The most common subjects include Christ, Mary, saints and angels. Although especially associated with "portrait" style images concentrating on one or two main figures, the term also covers most religious images in a variety of artistic media produced by Eastern Christianity, including narrative scenes. Icons can represent various scenes in the Bible.
Index, which is associated with its referent (smoke is a sign of fire). This category includes stylized drawing used to refer to an actions "printer" and "print", "scissors" and "cut" or "magnifying glass" and "search".
In computing, a printer is a peripheral device which makes a persistent representation of graphics or text on paper. While most output is human-readable, bar code printers are an example of an expanded use for printers.
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 cutting various thin materials, such as paper, cardboard, metal foil, cloth, rope, and wire. A large variety of scissors and shears all exist for specialized purposes. Hair-cutting shears and kitchen shears are functionally equivalent to scissors, but the larger implements tend to be called shears. Hair-cutting shears have specific blade angles ideal for cutting hair. Using the incorrect scissors to cut hair will result in increased damage or split ends, or both, by breaking the hair. Kitchen shears, also known as kitchen scissors, are intended for cutting and trimming foods such as meats.
Cutting is the separation or opening of a physical object, into two or more portions, through the application of an acutely directed force.
Symbol, which is related to its referent only by convention (letters, musical notation, mathematical operators etc.).
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 concepts and experiences. All communication is achieved through the use of symbols. Symbols take the form of words, sounds, gestures, ideas or visual images and are used to convey other ideas and beliefs. For example, a red octagon may be a symbol for "STOP". On a map, a blue line might represent a river. Numerals are symbols for numbers. Alphabetic letters may be symbols for sounds. Personal names are symbols representing individuals. A red rose may symbolize love and compassion. The variable 'x', in a mathematical equation, may symbolize the position of a particle in space.
This category includes standardized symbols found across many electronic devices, such as the power on/off symbol and the USB icon.
The majority of icons are encoded and decoded using metonymy, synecdoche, and metaphor.
An example of metaphorical representation characterizes all the major desktop-based computer systems including 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.
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.
Additionally, a group of icons can be categorised as brand icons, used to identify commercial software programs and are related to the brand identity 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 interfaces, icons are sometimes rendered in a TUI using special characters such as MouseText or PETSCII.
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 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.
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 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.
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 incorporated 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 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 MSDNdefines 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.
An icon is a Signifier pointing to a 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 Files and 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 pyisical objects (e.g. monitor, compact disk, mouse, printer etc...).
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.
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, 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." 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. 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.
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.
Because these company and program logos 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 intellectual property.
In closed systems such as iOS and Android, the use of icons is to a degree regulated or guidedto create a sense of consistency in the UI.
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, layed 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.
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 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.
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.
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.
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").
The standard icon is generally the size of an adult thumb, enabling both easy visual recognition and use in a touchscreen 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.
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. 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.
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.
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.
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.
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.
Over time, certain GUI widgets 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.
Another GUI icon is exemplified by the smiley face, a pictogram embedded in a text message. The smiley, and by extension other emoticons, 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.
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.
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.
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 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 or .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 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.
Simple icon editors and image-to-icon converters are also available online as web applications.
This is a list of notable computer icon software.
The following is a list of raster graphic applications capable of creating and editing icons:
The history of the graphical user interface, understood as the use of graphic icons and a pointing device to control a computer, covers a five-decade span of incremental refinements, built on some constant core principles. Several vendors have created their own windowing systems based on independent code, but with basic elements in common that define the WIMP "window, icon, menu and pointing device" paradigm.
The user interface (UI), in the industrial design field of human–computer interaction, is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls, and process controls. The design considerations applicable when creating user interfaces are related to or involve such disciplines as ergonomics and psychology.
In computing, a windowing system is software that manages separately different parts of display screens. It is a type of graphical user interface (GUI) which implements the WIMP paradigm for a user interface.
The Finder is the default file manager and graphical user interface shell used on all Macintosh operating systems. Described in its "About" window as "The Macintosh Desktop Experience", it is responsible for the launching of other applications, and for the overall user management of files, disks, and network volumes. It was introduced with the first Macintosh computer, and also exists as part of GS/OS on the Apple IIGS. It was rewritten completely with the release of Mac OS X in 2001.
In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two abstract objects.
Text-based user interface (TUI), also called textual user interface or terminal user interface, is a retronym coined sometime after the invention of graphical user interfaces (GUI). TUIs display computer graphics in text mode. An advanced TUI may, like GUIs, use the entire screen area and accept mouse and other inputs.
In human–computer interaction, WIMP stands for "windows, icons, menus, pointer", denoting a style of interaction using these elements of the user interface. It was coined by Merzouga Wilberts in 1980. Other expansions are sometimes used, such as substituting "mouse" and "mice" for menus, or "pull-down menu" and "pointing" for pointer.
A control element 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 manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, GTK, and Cocoa, contain a collection of controls and the logic to render these.
A window manager is system software that controls the placement and appearance of windows within a windowing system in a graphical user interface. Most window managers are designed to help provide a desktop environment. They work in conjunction with the underlying graphical system that provides required functionality—support for graphics hardware, pointing devices, and a keyboard, and are often written and created using a widget toolkit.
The following outline is provided as an overview of and topical guide to human–computer interaction:
A wallpaper or background is a digital image used as a decorative background of a graphical user interface on the screen of a computer, mobile communications device or other electronic device. On a computer it is usually for the desktop, while on a mobile phone it is usually the background for the 'home' or 'idle' screen. Though most devices come with a default picture, users can usually change it to custom files of their choosing.
In computing, a shell is a user interface for access to an operating system's services. In general, operating system shells use either a command-line interface (CLI) or graphical user interface (GUI), depending on a computer's role and particular operation. It is named a shell because it is the outermost layer around the operating system kernel.
The Windows shell is the graphical user interface for the Microsoft Windows operating system. Its readily identifiable elements consists of the desktop, the taskbar, the Start menu, the task switcher and the AutoPlay feature. On some versions of Windows, it also includes Flip 3D and the charms. In Windows 10, the Windows Shell Experience Host interface drives visuals like the Start Menu, Action Center, Taskbar, and Task View/Timeline. However, the Windows shell also implements a shell namespace that enables computer programs running on Windows to access the computer's resources via the hierarchy of shell objects. "Desktop" is the top object of the hierarchy; below it there are a number of files and folders stored on the disk, as well as a number of special folders whose contents are either virtual or dynamically created. Recycle Bin, Libraries, Control Panel, This PC and Network are examples of such shell objects.
The Apple Developer Tools are a suite of software tools from Apple to aid in making software dynamic titles for the macOS and iOS platforms. The developer tools were formerly included on macOS install media, but are now exclusively distributed over the Internet. As of macOS 10.12, Xcode is available as a free download from the Mac App Store.
In user interface design, an interface metaphor is a set of user interface visuals, actions and procedures that exploit specific knowledge that users already have of other domains. The purpose of the interface metaphor is to give the user instantaneous knowledge about how to interact with the user interface. They are designed to be similar to physical entities but also have their own properties. They can be based on an activity, an object, or a combination of both and work with users' familiar knowledge to help them understand 'the unfamiliar', and placed in the terms so the user may better understand.
Workbench is the graphical file manager of AmigaOS developed by Commodore International for their Amiga line of computers. Workbench provides the user with a graphical interface to work with file systems and launch applications. It uses a workbench metaphor for representing file system organisation.
A software widget is a relatively simple and easy-to-use software application or component made for one or more different software platforms.
In computing, a pointer or mouse cursor is a symbol or graphical image on the computer monitor or other display device that echoes movements of the pointing device, commonly a mouse, touchpad, or stylus pen. It signals the point where actions of the user take place. It can be used in text-based or graphical user interfaces to select and move other elements. It is distinct from the cursor, which responds to keyboard input. The cursor may also be repositioned using the pointer.