Icon Standardization for Web Applications
Abstract
This research is derived from my talk at ArabNet conference held in Beirut on , and available as a PDF on Unicode.org.
The aim of this research is to develop standards for representing icons in web applications. This means giving proposed icons in this research addresses in «Miscellaneous Symbols and Arrows» and «Miscellaneous Technical» Unicode blocks. e.g.:
- U+2BEA = RIGHT-POINTING MAGNIFYING GLASS WITH PLUS SIGN = Zoom in
- U+2BEB = RIGHT-POINTING MAGNIFYING GLASS WITH MINUS SIGN = Zoom out
- U+23FB = FOUR ANGULAR ARROWS FACING OUT = Full-screen
- U+23FC = FOUR ANGULAR ARROWS FACING IN = Exit full-screen
- … and so on.
Methodology
- First of all, I will show the solutions currently being used to display icons in web applications:
- Whether using the usual image files,
- Or using the embedded-fonts technology.
- Then I will form a model for a proposed web site, in order to summarize the icons needed for most web applications.
In light of this model, I will go to propose a set of recommendations to:- Unicode organization to determine Unicode icons missing in the current version of Unicode,
- and to W3C, to visualize a view for representing icons using CSS.
Using Regular Image Files
The most popular solution used to display icons in web applications is called “CSS Sprites”, which is to collect the various needed icons —of all sizes and colors— in a single regular image file. Here is a sample of Google icons stored in a single regular image file. Notice that icons are spread over the image canvas randomly.
Using The Embed Fonts Technology
The embed fonts technology has paved a new way for web developers to represent icons using characters in the embedded fonts instead of the regular image formats used usually in the web, such as PNG, GIF… etc, which represents an important step for
This step coincided with another important step as important as its previous one, which is the adoption of Unicode 6.0 for a broad spectrum of visual symbols (Emoji) and embedding it in its tables.
Emoji are the ideograms or smileys used in Japanese electronic messages and webpages, whose use is spreading outside Japan. Originally meaning pictograph, the word emoji literally means “picture” + “character”. Wikipedia, 2014
This step might lead us to a completely different usage of Emoji; providing a stable standard for addressing UI icons in software engineering.
According to this version of Unicode, each popular UI icon had a stable address in Unicode blocks. For example; the muted speaker has the address 1F507
, and the magnifying glass has the address 1F50D
… and so on.
RichStyle font is an attempt to implement the idea of icons-addressing in the web pages through the Unicode 6.0 and above, but this project revealed a lack of some icons and visual symbols that are not addressed yet by Unicode. These icons are the ones that have a label in the preview page of RichStyle font.
Recommendations for Unicode: Missing Icons
In order to clarify this limitation I will try to develop a model for a generic web site covers the most popular requirements for a modern web site.
Notice that:
- Every single class in this model needs an icon.
- Every single operation in each class needs an icon too.
- Attributes do not need icons.
In the light of this model, and comparing to the icons supported in Unicode 7.0 beta, web developer can use the following Unicode icons:
Item | Code | Character | Name | Alias Name(s) |
---|---|---|---|---|
about class | 1F6C8 | 🛈 | CIRCLED INFORMATION SOURCE | |
audio class | 1F3B5 | 🎵 | MUSICAL NOTE | music, being in good mood, audio clip |
bookmark operation | 1F516 | 🔖 | BOOKMARK | |
close operation | 1F5D9 | 🗙 | CANCELLATION X | close |
contact-us class | 2709 | ✉ | ENVELOPE | |
documentation class | 1F4D6 | 📖 | OPEN BOOK | read operator's manual |
document class | 1F5CE | 🗎 | DOCUMENT | |
downloads class | 2B8B | ⮋ | DOWNWARDS BLACK CIRCLED WHITE ARROW | |
e-book class | 1F56E | 🕮 | BOOK | |
edit operation | 270E | ✎ | LOWER RIGHT PENCIL | |
flip-horizontal operation | 2B0C | ⬌ | LEFT RIGHT BLACK ARROW | flip-horizontal |
flip-vertical operation | 2B0D | ⬍ | UP DOWN BLACK ARROW | flip-vertical |
go-top operation | 2B89 | ⮉ | UPWARDS BLACK CIRCLED WHITE ARROW | |
home class | 1F3E0 | 🏠 | HOUSE BUILDING | |
image class | 1F5BC | 🖼 | FRAME WITH PICTURE |
|
line-wrap operation | 2B92 | ⮒ | NEWLINE LEFT | |
log-in operation | 1F512 | 🔒 | LOCK | |
log-out operation | 1F513 | 🔓 | OPEN LOCK | |
plain-text class | 1F5B9 | 🖹 | DOCUMENT WITH TEXT | |
preferences class | 2699 | ⚙ | GEAR | tchnology, tools, preferences |
presentation class | 1F5BB | 🖻 |
|
presentation |
print operation | 1F5A8 | 🖨 | PRINTER | |
privacy-policy class | 1F512 | 🔒 | LOCK | privacy |
products class | 1F4E6 | 📦 | PACKAGE | commodities |
rich-text class | 1F5BA | 🖺 | DOCUMENT WITH TEXT AND PICTURE | |
rotate-left operation | 2B10 | ⬐ | LEFTWARDS ARROW WITH TIP DOWNWARDS | rotate-left |
rotate-right operation | 2B0E | ⬎ | RIGHTWARDS ARROW WITH TIP DOWNWARDS | rotate-right |
search operation | 1F50D | 🔍 | LEFT-POINTING MAGNIFYING GLASS | search |
services class | 1F527 | 🔧 | WRENCH | service |
show-comments operation | 1F4AC | 💬 | SPEECH BALLOON | comic book conversation bubble, comments |
terms-of-use class | 2696 | ⚖ | SCALES | legal term, jurisprudence |
video class | 1F39E | 🎞 | FILM FRAMES | film clip |
Underlined term means proposal. Notice also that I redefined 1F5BB
as an icon for presentation document.
Whilst, web developer still not find matching unicode addresses for the following classes and operations, which means they need to be added in the next Unicode release:
Item | Proposed Code | Character | Name | Alias Names |
---|---|---|---|---|
full-screen operation | 23FB | | FOUR ANGULAR ARROWS FACING OUT | full-screen |
exit-full-screen operation | 23FC | | FOUR ANGULAR ARROWS FACING IN | exit full-screen |
package class | 2BE0 | | TIED FOLDER | archive, compressed document |
spreadsheet class | 2BE1 | | DOCUMENT WITH TABLE OR BAR CHART | spreadsheet |
database class | 2BE2 | | DRUM | database |
FAQ class | 2BE3 | | TWO SPEECH BALLOONS WITH QUESTION MARK | FAQ |
help class | 2BE4 | | LIFE RAFT | help |
RSS class | 2BE5 | | RSS SYMBOL | |
shopping-cart class | 2BE6 | 🛒 | SHOPPING CART | |
crop operation | 2BE7 | | CROP SYMBOL | crop |
menu operation | 2BE8 | ⯨ | THREE HORIZONTAL LINES | menu |
share operation | 2BE9 | | THREE NODES CONNECTED USING TWO LINES | share |
zoom-in operation | 2BEA | | RIGHT-POINTING MAGNIFYING GLASS WITH PLUS SIGN | zoom in |
zoom-out operation | 2BEB | | RIGHT-POINTING MAGNIFYING GLASS WITH MINUS SIGN | zoom out |
zoom-fit operation | 2BEC | | RIGHT-POINTING MAGNIFYING GLASS WITH FRAME | fit |
zoom-original operation | 2BED | | RIGHT-POINTING MAGNIFYING GLASS WITH 1 NUMBER | original size |
Icons marked with yellow background were adapted by Unicode organization later on, i.e. after this article has been published.
Recommendations for W3C: Representing Icons Using CSS
W3C standards stated that icons should be represented using the following syntax:
<menu>
<menuitem icon='page-about.png'/>
<menuitem icon='domain-settings.png'/>
</menu>
Unfortunately, this standard will not allow you to implement the popular ways used nowadays to represent icons, whether through
As an alternative, I suggest representing icons using CSS pseudo element, not as an HTML element’s attribute. The reason for this is that icon —even though it represents an attribute— but:
- First of all; it’s a presentation attribute, and therefore must be represented using CSS rather than HTML,
- Secondly, it’s a rich attribute; an attribute needs attributes. These kind of attributes are usually represented using something called
Pseudo Element .
Practically; in the HTML page, we’ll use the element <MenuItem>
with a class name:
<menu>
<menuitem class='page-about'/>
<menuitem class='domain-settings'/>
</menu>
And in CSS file we’ll use a pseudo-element called ::icon
, to be able to adjust all the presentation attributes of this icon, just like content, font name, font size, and position.
.page-about::icon {
content: char(ℹ);
font: 10pt RichStyle;
icon-position: top;
}
.domain-settings::icon {
content: char(⚙);
font: 10pt RichStyle;
icon-position: top;
}
Icon Standardization for Desktop Applications
A few years ago, Tango Icons project has tried to set a standard for icons naming for Linux, in order to be addressed in a standard way. However, I think that Unicode 6.0+ now represents a reliable alternative to be adopted as a standard for addressing icons within the software process.
Here is an express view of proposed icons for desktop and mobile icons, inspired by Unicode 7.0 Beta itself.
Icons with green check-mark were adapted by Unicode organization later on, i.e. after this article has been published.
Conclusion
- Some Emoji icons for web environment need redefining, as shown in Table 1.
- Some Emoji icons for web environment are missed, and need to be added to Unicode as shown in Table 2.
- Some Emoji icons for desktop and mobile environments are missed, and need to be added to Unicode as shown in Figure 5.
- For W3C, icons should be defined using CSS; not HTML, as
Pseudo Elements , i.e.::icon{…}
References
- Unicode 7.0 Beta Symbols:
- Dingbats:
http://www.unicode.org/charts/PDF/Unicode-7.0/U70-2700.pdf - Emoticons:
http://www.unicode.org/charts/PDF/Unicode-7.0/U70-1F600.pdf - Miscellaneous Symbols and Arrows:
http://www.unicode.org/charts/PDF/Unicode-7.0/U70-2B00.pdf - Miscellaneous Symbols and Pictographs:
http://www.unicode.org/charts/PDF/Unicode-7.0/U70-1F300.pdf - Miscellaneous Technical:
http://www.unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf - Supplemental Arrows-C:
http://www.unicode.org/charts/PDF/Unicode-7.0/U70-1F800.pdf - Transport and Map Symbols:
http://www.unicode.org/charts/PDF/Unicode-7.0/U70-1F680.pdf
- Dingbats:
- RichStyle font (list of the icon designers including The Noun Project designers): https://richstyle.org/richstyle-font-en