Domain-Specific Pictograms for Mobile Web Applications

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			1F6BC
	163	family	1F46A
human/body
eye			1F440
ear			1F442
rock			270A
scissors			270C		7	6
paper			270B
foot			1F463
shoes	124	shoe	1F45E
spectacles	116	glasses	1F453
wheelchair			267F			6
human/gender
man	80	1head1	1F6B9
woman	50	1smallface	1F6BA
humanoid
devil			1F47F
skull			1F480
alien			1F47D
ghost			1F47B
angel			1F47C

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			1F400
ox			1F402
tiger			1F405
rabbit			1F407
dragon			1F409
snake			1F40D
horse			1F40E
sheep			1F40F
monkey			1F412
cock			1F413
dog	74	dog	1F415
boar			1F417
horoscope
aries			2648			6
taurus			2649			6
gemini			264A			6
cancer			264B			6
leo			264C			6
virgo			264D			6
libra			264E			6
scorpio			264F			6
sagittarius			2650			6
capricorn			2651			6
aquarius			2652			6
pisces			2653			6
ophiuchus			26CE

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
holiday			41F38C
xmas			1F384
birthday			1F382
party			1F389
3newYearsEve
newYearsDay			41F38D
time/season
3oclock	46	1clock	1F552
calendar	67	calendar	1F4C5
	57	hourglass1	23F3
	58	hourglass2	231B			6
time/season
3spring			41F026
3summer			41F027
3autumn			41F028
3winter			41F029
weather
sunny	44	sun	2600			6
rainy	95	rain	2614
cloudy	107	cloud	2601			6
snow	60	snowflake	2744		7	6
thunder	16	bolt	26C8			626A1
foggy			1F301
wave			1F30A
	167	partlycloudy	26C5

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
moon	47	moon2	1F31B
earth			1F30D		1F30F
star	69	star2	1F31F
	15	moon1	1F31C
	75	star3	2605		5	6
	76	sparkle	2728
	28	star1	2734		7	6
animal
octopus			1F419
monkey			1F435
pig			1F437
cat			1F431
dog	134	hound	1F436
bear			1F43B
whale			1F433
penguin			1F427
tiger			1F42F
rabbit			1F430
rat			1F400
ladybird			1F41E
3beetle
fish			1F41F
	78	bird	1F426
plant
fourLeafClover			1F340
flower	113	flower	1F337
	53	bud	1F338
	133	leaf	1F342

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			1F37A
forkKnife	146	meal1	1F374
cocktail	52	martini	1F378
cake			1F370
coffeeCup	93	cup	2615
	12	wineglass	1F377
entertainment
3prize
slotMachine			1F3B0
horserace			1F3C7
motorboatRace			1F6A4
bicycleRace			1F6B4
heart			2665		5	6
diamond			2666		5	6
spade			2660		5	6
clover			2663		5	6
hitDart			1F3AF
crown			1F451
	170	dice	1F3B2
music
quarterNote			2669		5	61F3B5
G-clef			1F3BC			6
rest			1D13B
guitar			1F3B8
dress
highHeels			1F460
dress			1F457
	25	wristwatch	231A			6
misc
giftBox	144	present	1F381
fire			1F525
snowman			26C4			6
work			11F477
money	139	dollar	1F4B5
	109	3check
	165	package	1F4E6
	86	voiceballoon	1F4AC

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			11F3BD
baseball	45	baseball	26BE
soccer			26BD
basketball			1F3C0
ski			1F3BF
camp			26FA
motorSport			11F3C1
checkerFlag			1F3C1
golf			26F3
surfing			1F3C4
fishing			1F3A3
horseriding			1F3C7
americanFootball	96	football	1F3C8
swimming			1F3CA
3scuba
ranking
trophy			1F3C6
3gold
3silver
3bronze

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

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
parking			1F17F
busStop			1F68F
restroom			1F6BB
policeStation			11F46E
postOffice	129	mailbox	1F3E4		41F3E3
bank			1F3E6
atm			1F3E7
hospital			1F3E5
convenienceStore			1F3EA
school			1F3EB
park			26F2
hotel			1F3E8
gasStation			26FD
house	112	house	1F3E0
cross			26EA
restaurant	160	meal2	1F374
store			1F3EC
cafe			11F375
fastfood			1F354
pub	65	mug	11F37B
movie	110	videocam	1F3A6
karaoke			1F3A4
spa			2668		5
amusementPark			1F3A1
3zoo
building			1F3E2
ticket	106	ticket	1F3AB
noSmoking			1F6AD
smoking			1F6AC
	156	factory	1F3ED
	31	circleslash	1F6AB
	13	speaker	1F4E2
	11	isymbol	2139			6
	90	usa	21F1FA 1F1F8
vehicle
bus			1F68C
train	172	train	1F686
expressTrain	172	1train	1F684
car	125	car	1F697
taxi	125	1car	1F695
plane	168	plane	2708		7	6
ship	169	boat	1F6A2
onFoot			1F6B6
subway			1F687
rocket			1F680
	148	truck	1F69A

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

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.

Attribution

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

Reference

This article is downloadable as a PDF document.

First published: 2013-01-25.