A CORNUCOPIA OF SYMBOLS

Pictograms are small images representing states, objects and actions, stored locally on a terminal, and that can appear in any Web application. Several norms (WAP by the Open Mobile Alliance; UNICODE by ISO) and proprietary standards (Openwave icons; Japanese operators' emojis) specify catalogues of pre-defined pictograms and the syntax to embed them in (X)HTML pages. A companion article surveys these approaches, evaluates their advantages and shortcomings, and reviews their portability with respect to major mobile browsers and operating systems.

That same article includes correspondence tables between 94 symbols from the core and emoticon dictionaries of major pictographic standards used outside Japan. These symbols are the most widely implemented in mobile phones ranging from low-end devices to high-end terminals, from legacy handsets to modern smartphones; they also are serviceable for all common Web applications.

However, tourism portals, e-commerce stores, news sites or on-line discussion forums must convey quite different information in iconic form to their visitors. The following sections present compatibility matrices for domain-specific pictograms of UNICODE, WAP and Openwave. Their organization follows the WAP nomenclature, thus keeping the number of symbols to consider within reason. All icons available in the Openwave browser are included as well, because this is still a relevant platform when catering for feature phones. Tables reference code points in the UNICODE space through hexadecimal values and follow the conventions hereafter:

  1. No direct match; entry is a proposed surrogate.
  2. Symbol relies upon UNICODE combining character sequences.
  3. Openwave or WAP-specific symbol without equivalent in UNICODE.
  4. Pictogram specific to Japan and with little relevance in other countries.
  5. Already available in Android version 1.5.
  6. In iOS, monochrome character instead of multicolour emoji.
  7. Already available in Android version 2.3.

Currently, Windows Phone 8.0 provides the most comprehensive set of ISO pictographs; iOS exhibits the least consistent style, mixing polychrome emoji-like images and monochrome, flat graphical characters. The default font in Android oddly omits several pictographs scattered throughout UNICODE blocks.

PORTRAITS AND ROLES

These images complement emoticons; sometimes, UAProf files unreliably advertise them as being implemented in WAP 2 devices (notably Nokia S40 phones).

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
human/age
baby no 1F6BC yes yes yes
no 163 family 1F46A yes yes yes
human/body
eye no 1F440 yes yes yes
ear no 1F442 yes yes yes
rock no 270A yes yes yes
scissors no 270C yes 7yes 6yes
paper no 270B yes yes yes
foot no 1F463 yes yes yes
shoes 124 shoe 1F45E yes yes yes
spectacles 116 glasses 1F453 yes yes yes
wheelchair no 267F yes yes 6yes
human/gender
man 80 1head1 1F6B9 yes yes yes
woman 50 1smallface 1F6BA yes yes yes
humanoid
devil no 1F47F yes yes yes
skull no 1F480 yes yes yes
alien no 1F47D yes yes yes
ghost no 1F47B yes yes yes
angel no 1F47C yes yes yes

ASTROLOGY

The signs of the horoscope are only partially implemented in Android, inconsistently in iOS, and not at all in Openwave – and in practice neither are they in WAP devices.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
chineseZodiac
rat no 1F400 yes no yes
ox no 1F402 yes no yes
tiger no 1F405 yes no yes
rabbit no 1F407 yes no yes
dragon no 1F409 yes no yes
snake no 1F40D yes yes yes
horse no 1F40E yes yes yes
sheep no 1F40F yes no yes
monkey no 1F412 yes yes yes
cock no 1F413 yes yes yes
dog 74 dog 1F415 yes no yes
boar no 1F417 yes yes yes
horoscope
aries no 2648 yes yes 6yes
taurus no 2649 yes yes 6yes
gemini no 264A yes yes 6yes
cancer no 264B yes yes 6yes
leo no 264C yes yes 6yes
virgo no 264D yes yes 6yes
libra no 264E yes yes 6yes
scorpio no 264F yes yes 6yes
sagittarius no 2650 yes yes 6yes
capricorn no 2651 yes yes 6yes
aquarius no 2652 yes yes 6yes
pisces no 2653 yes yes 6yes
ophiuchus no 26CE yes yes yes

TIME AND WEATHER

Many weather and time symbols can be found in analogous form amongst all pictographic standards. A number of signs are specific to Japan and are of no interest to developers in the rest of the world.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
time/event
anniversary 105 day 11F388 yes yes yes
holiday no 41F38C yes yes yes
xmas no 1F384 yes yes yes
birthday no 1F382 yes yes yes
party no 1F389 yes yes yes
3newYearsEve no no no no no
newYearsDay no 41F38D yes yes yes
time/season
3oclock 46 1clock 1F552 yes yes yes
calendar 67 calendar 1F4C5 yes yes yes
no 57 hourglass1 23F3 yes yes yes
no 58 hourglass2 231B yes yes 6yes
time/season
3spring no 41F026 yes no no
3summer no 41F027 yes no no
3autumn no 41F028 yes no no
3winter no 41F029 yes no no
weather
sunny 44 sun 2600 yes yes 6yes
rainy 95 rain 2614 yes yes yes
cloudy 107 cloud 2601 yes yes 6yes
snow 60 snowflake 2744 yes 7yes 6yes
thunder 16 bolt 26C8 yes yes 626A1
foggy no 1F301 yes yes yes
wave no 1F30A yes yes yes
no 167 partlycloudy 26C5 yes yes yes

NATURE

Icons for astronomy and plants are more or less available in all device classes, but only modern smartphones offer a large menagerie of animal symbols.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
astronomy
sun 44 sun 1F31E yes no yes
moon 47 moon2 1F31B yes yes yes
earth no 1F30D yes 1F30F yes
star 69 star2 1F31F yes yes yes
no 15 moon1 1F31C yes no yes
no 75 star3 2605 yes 5yes 6yes
no 76 sparkle 2728 yes yes yes
no 28 star1 2734 yes 7yes 6yes
animal
octopus no 1F419 yes yes yes
monkey no 1F435 yes yes yes
pig no 1F437 yes yes yes
cat no 1F431 yes yes yes
dog 134 hound 1F436 yes yes yes
bear no 1F43B yes yes yes
whale no 1F433 yes yes yes
penguin no 1F427 yes yes yes
tiger no 1F42F yes yes yes
rabbit no 1F430 yes yes yes
rat no 1F400 yes no yes
ladybird no 1F41E yes yes yes
3beetle no no no no no
fish no 1F41F yes yes yes
no 78 bird 1F426 yes yes yes
plant
fourLeafClover no 1F340 yes yes yes
flower 113 flower 1F337 yes yes yes
no 53 bud 1F338 yes yes yes
no 133 leaf 1F342 yes yes yes

COMMERCE AND ENTERTAINMENT

Handsets support this hodgepodge of signs unevenly.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
food
beer no 1F37A yes yes yes
forkKnife 146 meal1 1F374 yes yes yes
cocktail 52 martini 1F378 yes yes yes
cake no 1F370 yes yes yes
coffeeCup 93 cup 2615 yes no yes
no 12 wineglass 1F377 yes yes yes
entertainment
3prize no no no no no
slotMachine no 1F3B0 yes yes yes
horserace no 1F3C7 yes no yes
motorboatRace no 1F6A4 yes yes yes
bicycleRace no 1F6B4 yes no yes
heart no 2665 yes 5yes 6yes
diamond no 2666 yes 5yes 6yes
spade no 2660 yes 5yes 6yes
clover no 2663 yes 5yes 6yes
hitDart no 1F3AF yes yes yes
crown no 1F451 yes yes yes
no 170 dice 1F3B2 yes yes yes
music
quarterNote no 2669 yes 5yes 61F3B5
G-clef no 1F3BC yes yes 6yes
rest no 1D13B no no no
guitar no 1F3B8 yes yes yes
dress
highHeels no 1F460 yes yes yes
dress no 1F457 yes yes yes
no 25 wristwatch 231A yes yes 6yes
misc
giftBox 144 present 1F381 yes yes yes
fire no 1F525 yes yes yes
snowman no 26C4 yes yes 6yes
work no 11F477 yes yes yes
money 139 dollar 1F4B5 yes yes yes
no 109 3check no no no no
no 165 package 1F4E6 yes yes yes
no 86 voiceballoon 1F4AC yes yes yes

SPORTS

Sport symbols are only reasonably implemented in recent high-end terminals. A number of pictograms specified in WAP were never carried over to UNICODE.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
sport
sport no 11F3BD yes yes yes
baseball 45 baseball 26BE yes yes yes
soccer no 26BD yes yes yes
basketball no 1F3C0 yes yes yes
ski no 1F3BF yes yes yes
camp no 26FA yes yes yes
motorSport no 11F3C1 yes yes yes
checkerFlag no 1F3C1 yes yes yes
golf no 26F3 yes yes yes
surfing no 1F3C4 yes yes yes
fishing no 1F3A3 yes yes yes
horseriding no 1F3C7 yes no yes
americanFootball 96 football 1F3C8 yes yes yes
swimming no 1F3CA yes yes yes
3scuba no no no no no
ranking
trophy no 1F3C6 yes yes yes
3gold no no no no no
3silver no no no no no
3bronze no no no no no

TOOLS AND OFFICE SUPPLIES

A large number of interesting, generic icons are built in smartphones and in low-end mobile phones featuring the Openwave browser. There are few equivalent symbols in WAP, but these optional dictionaries (like all others listed in this document) have rarely, if ever, been implemented in commercial WAP handsets anyway.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
appliance
pager no 1F4DF yes yes yes
antenna no 1F4E1 yes yes yes
camera 94 camera1 1F4F7 yes yes yes
phone 85 phone1 1F4DE yes yes yes
mobilePhone 161 phone3 1F4F1 yes yes yes
fax 166 fax 1F4E0 yes yes yes
pc no 1F4BB yes yes yes
no 111 camcorder 1F4F9 yes yes yes
tool
hammer no 1F528 yes yes yes
no 145 3tag no no no no
no 83 briefcase 1F4BC yes yes yes
no 59 floppy1 1F4BE yes yes yes
no 126 floppy2 11F4BE yes yes yes
no 84 folder2 1F4C2 yes yes yes
no 103 document2 1F4C3 yes yes yes
no 131 rolocard 1F4C7 yes yes yes
no 159 graph2 1F4C8 yes yes yes
no 128 graph1 1F4C9 yes yes yes
no 127 chart 1F4CA yes yes yes
no 92 clipboard 1F4CB yes yes yes
no 49 pushpin 1F4CC yes yes yes
no 137 thumbtack 1F4CD yes yes yes
no 157 ruler1 1F4CF yes yes yes
no 158 ruler2 1F4D0 yes yes yes
no 142 3tablet no no no no
no 121 note1 1F4D3 yes yes yes
no 122 note2 1F4D4 yes yes yes
no 97 book1 1F4D7 yes yes yes
no 102 book4 1F4D8 yes yes yes
no 100 book2 1F4D9 yes yes yes
no 147 books 1F4DA yes yes yes
no 136 scroll 1F4DC yes yes yes
no 91 note3 11F4DD yes yes yes
no 135 battery 1F50B yes yes yes
no 162 plug 1F50C yes yes yes
no 48 bell 1F514 yes yes yes
no 130 flashlight 1F526 yes yes yes
no 153 wrench 1F527 yes yes yes
no 123 boltnut 1F529 yes yes yes
no 114 knife 1F52A yes yes yes
no 104 scissors 2702 yes 7yes 6yes
no 151 envelope2 2709 yes 7yes 6yes
no 149 pencil 270F yes 7yes 6yes
weapon
gun no 1F52B yes yes yes
bomb no 1F4A3 yes yes yes

TRANSPORT AND MAPS

Pictograms dealing with places and modes of transport are highly relevant in all Web sites manipulating location-based information. Fortunately, the coverage is fairly good amongst all device classes.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
map
signal 99 trafficlight 1F6A5 yes yes yes
parking no 1F17F yes yes yes
busStop no 1F68F yes yes yes
restroom no 1F6BB yes yes yes
policeStation no 11F46E yes yes yes
postOffice 129 mailbox 1F3E4 yes 41F3E3 yes
bank no 1F3E6 yes yes yes
atm no 1F3E7 yes yes yes
hospital no 1F3E5 yes yes yes
convenienceStore no 1F3EA yes yes yes
school no 1F3EB yes yes yes
park no 26F2 yes yes yes
hotel no 1F3E8 yes yes yes
gasStation no 26FD yes yes yes
house 112 house 1F3E0 yes yes yes
cross no 26EA yes yes yes
restaurant 160 meal2 1F374 yes yes yes
store no 1F3EC yes yes yes
cafe no 11F375 yes yes yes
fastfood no 1F354 yes yes yes
pub 65 mug 11F37B yes yes yes
movie 110 videocam 1F3A6 yes yes yes
karaoke no 1F3A4 yes yes yes
spa no 2668 yes 5yes yes
amusementPark no 1F3A1 yes yes yes
3zoo no no no no no
building no 1F3E2 yes yes yes
ticket 106 ticket 1F3AB yes yes yes
noSmoking no 1F6AD yes yes yes
smoking no 1F6AC yes yes yes
no 156 factory 1F3ED yes yes yes
no 31 circleslash 1F6AB yes yes yes
no 13 speaker 1F4E2 yes yes yes
no 11 isymbol 2139 yes yes 6yes
no 90 usa 21F1FA 1F1F8 yes no yes
vehicle
bus no 1F68C yes yes yes
train 172 train 1F686 yes no yes
expressTrain 172 1train 1F684 yes yes yes
car 125 car 1F697 yes yes yes
taxi 125 1car 1F695 yes yes yes
plane 168 plane 2708 yes 7yes 6yes
ship 169 boat 1F6A2 yes yes yes
onFoot no 1F6B6 yes yes yes
subway no 1F687 yes yes yes
rocket no 1F680 yes yes yes
no 148 truck 1F69A yes yes yes

MISCELLANEOUS

Openwave defines a number of geometric, typographical and user-interface icons that have no equivalent in WAP, but map directly to well-supported UNICODE characters. The vendor-specific logo and pclogo icons appear to be redundant.

WAP Openwave ISO WP android iOS
Class – name Nr Name Code 8.0 4.1 – 4.2 5.0 – 6.0
Internet user interface
no 500 pclogo no no no 6F8FF
no 501 lockcertificate 1F510 yes yes yes
no 502 caps 1F520 yes yes yes
no 503 lower 1F521 yes yes yes
no 504 numbers 1F522 yes yes yes
no 505 symbols 1F523 yes yes yes
no 506 accept 2714 yes 5yes 6yes
no 507 checkbox 2611 yes no 6yes
no 508 edit 2712 yes 7yes 6yes
no 509 radio 1F518 yes yes yes
no 510 view 1F50E yes yes yes
no 512 bookmarks 1F516 yes yes yes
no 513 exit 11F4F2 yes yes yes
no 514 home 11F3E0 yes yes yes
no 515 inbox 1F4EB yes yes yes
no 516 mark 1F4D1 yes yes yes
no 518 reload 1F503 yes yes 6yes
no 519 arrow 27B2 yes yes 6yes
Typography
no 150 logo no no no 6F8FF
no 173 blankfull 2003 yes yes yes
no 174 blankhalf 2002 yes yes yes
no 175 blankquarter 2005 yes yes yes
no 1 exclamation1 2755 yes yes yes
no 2 exclamation2 2757 yes yes yes
no 3 question1 2754 yes yes yes
no 4 question2 2753 yes yes yes
no 26 plus 2795 yes yes yes
no 27 minus 2796 yes yes yes
no 55 multiply 2716 yes 5yes yes
no 66 divide 2797 yes yes yes
no 40 bigcircle1 2B55 yes yes yes
no 62 cross2 274C yes yes yes
no 132 check2 2713 yes 5yes 6yes
no 61 cross1 274E yes yes yes
no 73 checkmark1 2705 yes yes yes
Geometric shapes
no 117 roundarrow1 21AA yes 5yes 6yes
no 118 roundarrow2 21A9 yes 5yes 6yes
no 29 uparrow1 21E7 yes 5yes 6yes
no 30 downarrow1 21E9 yes 5yes 6yes
no 63 rightarrow1 21E8 yes 5yes 6yes
no 64 leftarrow1 21E6 yes 5yes 6yes
no 33 uptri1 25B3 yes 5yes 6yes
no 32 downtri1 25BD yes 5yes 6yes
no 6 righttri1 25BB yes no 6yes
no 5 lefttri1 25C1 yes 5yes 6yes
no 7 lefttri2 25C0 yes 5yes yes
no 88 uptri3 1F53A yes yes yes
no 89 downtri3 1F53B yes yes yes
no 9 littlesquare1 25AB yes yes 6yes
no 17 medsquare1 25FD yes yes 6yes
no 21 bigsquare1 25FB yes yes 6yes
no 38 biggestsquare1 2B1C yes yes yes
no 10 littlesquare2 25AA yes 5yes 6yes
no 18 medsquare2 25FE yes yes 6yes
no 22 bigsquare2 25FC yes yes 6yes
no 39 biggestsquare2 2B1B yes yes yes
no 19 littlediamond1 1F539 yes yes yes
no 36 bigdiamond1 1F537 yes yes yes
no 20 littlediamond2 1F538 yes yes yes
no 37 bigdiamond2 1F536 yes yes yes
no 23 littlecircle1 26AA yes yes 6yes
no 40 bigcircle1 1F535 yes yes yes
no 24 littlecircle2 26AB yes yes 6yes
no 41 bigcircle2 1F534 yes yes yes

DETECTION OF TERMINAL CAPABILITIES

While Device Description Repositories (DDR) include few attributes directly related to pictograms, an application server can nevertheless detect support for this capability with a reasonable level of confidence.

  • Openwave and WAP.

    If the browser name and browser version are known, then one can readily determine whether the client software implements WAP or Openwave pictograms, and, implicitly, which catalogues of symbols are available.

    With WURFL, this is a matter of checking attribute mobile_browser against a series of browser names, and attribute mobile_browser_version against a range of versions. The compatibility of browsers with standard WAP and Openwave icon sets is detailed in the article mentioned in the introduction.

  • ISO.

    Support for ISO pictographs can be derived from the operating system name and version, and the browser name and version. In WURFL, those additional attributes correspond to device_os and device_os_version.

    Data about the OS are required because ISO pictographs are characters defined by the system font of the handset; browser identification is necessary because different browsers deal with the UNICODE space differently. Thus, while the default stock browsers of Windows Phone, iOS and Android handle pictographs without problems, Opera Mobile 12.0 is unable to render every character outside the Basic Multilingual Plane.

    Regrettably, whereas ISO characters are all neatly organized in distinct UNICODE blocks, mobile operating systems may implement these only partially – as revealed by a quick look at the preceding tables. Configuring a back-end system to serve appropriate symbols for each device can therefore become a tedious task, as this cannot be reduced to a simple “character block is available/unavailable” binary logic.

  • Emoji.

    One cannot rely upon common attributes to determine the availability of emojis: browser or operating system identifiers of phones commercialized in Japan are frequently unknown or ambiguous. Nippon operators classify devices in generations (e.g. FOMA 900i, FOMA 902i, FOMA 903i, etc. by NTT DoCoMo), and duly document the corresponding browser capabilities and pictogram sets in their manuals and WWW sites. Unfortunately, well-known DDR developed in Western countries do not store this information; when they do, not with enough accuracy: WURFL, for instance, has a boolean attribute simply indicating whether emojis are supported or not.

    In any case, Japanese mobile networks constitute such a peculiar market that special-purpose gateways and server utilities have been developed there to cope with the multiplicity of proprietary pictographic formats.

The utilization of ISO pictographs and Japanese emojis raises further issues related to character encodings, whose basics are explained in another article.

REQUIREMENTS ON PICTOGRAPHIC RESOURCES

Pictograms must fulfil certain design criteria to ensure their usability in a mobile environment. Manufacturers publish detailed instructions regarding the technical characteristics (dimensions, colours, aspect, style) of icons embedded in native applications running on their devices; references can be found in the table below.

Vendor Reference for OS application iconography
Apple iOS
Google Android
Microsoft Windows Phone
Nokia Meego, S40, Symbian
RIM Blackberry v. 6.0, Blackberry v. 6.0, Blackberry v. 7.0, Blackberry v. 10.0
Samsung Bada

Hereafter, we sketch some clearly non-exhaustive requirements that complement these vendor-specific apps-oriented guidelines, but are targeted at cross-platform Web development with non-proprietary technologies.

  • Formats.

    A typeface represents a future-proof approach to deliver pictograms to mobile devices. When packaged as a Web font, all common formats (WOFF, TTF, SVG, OTF, EOT) must be generated because different device models recognize different subsets of this group of standards. An additional image pack caters for those numerous mobile phones incapable of processing Web fonts. Here, PNG is indispensable because of the deplorably inconsistent support for SVG images across mobile browsers.

  • Dimensions.

    Even vector-based pictures may not retain their legibility when rescaled; icons must be delivered in several sizes, crafted to remain crisp in all their variations, as explained here. Rather than a single pictogram for “telephone”, there may be different images designed, for instance, to appear in large menus and titles, in the normal body of text, and as small adjuncts to form fields and status areas. When starting with recommended icon dimensions for native apps, one must adjust them to those Web-orientated use-cases.

  • Colours.

    The mainstream style of the WWW is derived from printed documents: dark text on a light background. This presentation is adequate for all sorts of mobile phones, including those operated via LCD touch screens. Recently, “black themes”, i.e. light text on a dark background, have taken hold in order to cope with the starkly brightness-dependent power consumption of OLED displays (about an order of magnitude more for white than for sombre colours, and three times as much as LCD screens in the former case). Pictograms should be legible in both contexts, which, in the case of polychrome symbols, might entail designing two complementary icon sets.

  • Dictionaries.

    The pictograms listed in this and the other referenced paper are well-established and are sufficient for a wide range of purposes. Any extension must comply with UNICODE (symbols, code points, names), as this norm progressively supersedes all other standards and is already the default in Windows Phone, iOS and Android. Unavoidably, some non-standard signs – especially logos for the plethora of Internet stores and social networks – may have to be added to the collection on a case-by-case basis.

Simple, legible symbols are preferable to the sometimes overly refined and colourful emojis favoured by Apple; however, the understandability of pictograms is a complex matter whose thorough discussion is way beyond the scope of the present article. As for the technical aspects of programming mobile Web applications with custom icon sets, they are enough to form the topic of a separate instalment.

REFERENCE

Download the paper in PDF format

© 2013 Eduardo Casais, areppim AG, Bern, Switzerland.

ATTRIBUTION

The tables use icons from the fatcow collection at fatcow.com/free-icons.

No feedback yet

Leave a comment


Your email address will not be revealed on this site.

Your URL will be displayed.
Enter the word located at position 3 in the title of this post.
(Line breaks become <br />)
(Name, email & website)
(Allow users to contact you through a message form (your email will not be revealed.)