App Icons

Representation of an internal application without the application name visible. Because this has role="img" you must provide aria-label="" with a description of the application. App icons are usually created by combining color and minimal type. If needed, the app icon can be a simple graphic logo.

More colors are available, see color for all available color names.

<div class="app-icon app-icon--orangepink" role="img" aria-label="Temptation Editor">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">T</span>
		<span class="app-icon__character">E</span>
	</div>
</div>
<div class="app-icon app-icon--lightishgreen" role="img" aria-label="Article Editor">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">A</span>
		<span class="app-icon__character">E</span>
	</div>
</div>
<div class="app-icon app-icon--coolblue" role="img" aria-label="Workflow">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">W</span>
	</div>
</div>
<div class="app-icon app-icon--duskblue" role="img" aria-label="Timey Mc Timeface">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">T</span>
		<span class="app-icon__character">T</span>
	</div>
</div>
<div class="app-icon app-icon--lightbluegrey" role="img" aria-label="Site Management">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">S</span>
		<span class="app-icon__character">M</span>
	</div>
</div>
<div class="app-icon app-icon--slate" role="img" aria-label="Site Management">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">S</span>
		<span class="app-icon__character">M</span>
	</div>
</div>
<div class="app-icon app-icon--sunyellow" role="img" aria-label="Search">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">S</span>
	</div>
</div>
<!-- more colors are available, see /style/color for all available color names -->

Attribute		Description
`role="img`	Required	It looks like an image but it's not.
`aria-label`	Required	Only when there's no visible title. Short title or name on `.app-icon`
`aria-hidden="true"`	Required	On `.app-icon__logo`

Sizing

T E

<div class="app-icon app-icon--orangepink" role="img" aria-label="Temptation Editor">
	<div class="app-icon__logo">
		<span class="app-icon__character">T</span>
		<span class="app-icon__character">E</span>
	</div>
</div>
<div class="app-icon app-icon--large app-icon--orangepink" role="img" aria-label="Temptation Editor">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">T</span>
		<span class="app-icon__character">E</span>
	</div>
</div>
<div class="app-icon app-icon--xlarge app-icon--orangepink" role="img" aria-label="Temptation Editor">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">T</span>
		<span class="app-icon__character">E</span>
	</div>
</div>

With application names

As we provide visible description of the logo, the way the aria attributes are arranged has changed.

T E

Temptation Editor

A E

Article Editor

Workflow

T T

Timey Mc Timeface

S M

Site Management

T T

Timey Mc Timeface

T E

Temptation Editor

<div class="app-icon app-icon--orangepink" role="img" aria-labelledby="app-icon-name1">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">T</span>
		<span class="app-icon__character">E</span>
	</div>
	<span class="app-icon__name" id="app-icon-name1">Temptation Editor</span>
</div>

Attribute		Description
`aria-labelledby`	Required	Matches the `id` of `.app-icon__name`
`aria-hidden="true"`	Required	On `.app-icon__logo`

With a link

Simply replace the <div class="app-icon"> with <a href="#" class="app-icon"> to make the icon clickable.

If for some reason you aren’t able to swap the module element with a link you can nest a link inside the module wrapper.

Temptation Editor

<a href="#" class="app-icon app-icon--orangepink" role="img" aria-labelledby="app-icon-link-name1">
	<div class="app-icon__logo" aria-hidden="true">
		<span class="app-icon__character">T</span>
		<span class="app-icon__character">E</span>
	</div>
	<span class="app-icon__name" id="app-icon-link-name1">Temptation Editor</span>
</a>

<!-- or -->

<div class="app-icon app-icon--orangepink" role="img" aria-labelledby="app-icon-link-name2">
	<a href="#" class="app-icon__link">
		<div class="app-icon__logo" aria-hidden="true">
			<span class="app-icon__character">T</span>
			<span class="app-icon__character">E</span>
		</div>
		<span class="app-icon__name" id="app-icon-link-name2">Temptation Editor</span>
	</a>
</div>

Graphic logo

The graphic logo has to be white. If you want to put a little bit of contrast in the logo, the darker area’s should be black with an opacity of 25%. Its dimensions should be 100x100. We only show it at 50x50 but this way it’s high dpi ready.

The original image:

a simplistic clock in white and transparent black

In its processed state:

<div class="app-icon app-icon--coolblue" role="img" aria-label="Timey Mc Timeface">
	<div class="app-icon__logo" aria-hidden="true">
		<img src="/img/timeymctimeface-clock.png" class="app-icon__img" alt=""/>
	</div>
</div>
<!-- large -->
<div class="app-icon app-icon--large app-icon--coolblue" role="img" aria-label="Timey Mc Timeface">
	<div class="app-icon__logo" aria-hidden="true">
		<img src="/img/timeymctimeface-clock.png" class="app-icon__img" alt=""/>
	</div>
</div>
<!--  xlarge -->
<div class="app-icon app-icon--xlarge app-icon--coolblue" role="img" aria-label="Timey Mc Timeface">
	<div class="app-icon__logo" aria-hidden="true">
		<img src="/img/timeymctimeface-clock.png" class="app-icon__img" alt=""/>
	</div>
</div>