Mobile app icons are the first impression users have of your app’s brand and purpose. We have created a set of guidelines to help you create your own app icon, as well as help you name your app, so that it is aligned with the WashU brand.

Mobile App Icon Template

This template includes – both title bar options (WashU /WashU Med) and options for background colors. Be sure the fill color of your icon/acronym is appropriate for the background color you choose, e.g. white for dark backgrounds and gray for light backgrounds. (see specifications below).

You can resize this template to create all icon sizes needed for your app (reference Resources links for icon sizes).


Common Icon Features

app icons

University Name

  • Appears on primary red background
  • Name is displayed in Source Sans Pro – Bold typeface
  • Options for name are WashU or WashU Med
  • White bottom border separates title bar from secondary background color

Secondary Background Color

  • Can choose from 8 secondary color choices for background (see below)
  • Main WashU app uses primary red as background color

Icon

  • Icons are one color. Icons are white on all background colors except for yellow and light gray. On these backgrounds, icons are dark gray.
  • Icons are made up of flat, solid lines
  • Some elements may be filled in to help with readability at smaller image sizes
  • In place of an icon, an acronym of four letters or less may be used, set in Source Sans Pro – bold

Color Recommendations

Primary

Web:
rgb(165, 20, 23)
#a51417
$red

Title bar, app background for main WashU app

Secondary

Web:
rgb(23, 39, 82)
#172752
$blue-dark

Web:
rgb(0, 95, 133)
#005f85
$blue

Web Only:
rgb(43, 130, 130)
#2b8282
$turquoise

Web:
rgb(209, 95, 39)
#d15f27
$orange

Web:
rgb(108, 115, 115)
#6c7373
$gray

Web Only:
rgb(61, 61, 61)
#3d3d3d
$gray-dark

Use with dark grey icon

Web:
rgb(255, 204, 0)
#ffcc00
$yellow

Web:
rgb(200, 200, 200)
#c8c8c8
$gray-light


Home Screen

App Name

  • On the home screen, you can fit 10-12 characters before an ellipsis is added
  • If you want the entire name to be visible on any platform, limit app name to 10-12 characters
  • The app name on the home screen doesn’t have to be the actual published name of the app
  • Use a shortened app name for the home screen
    • Do not include “WashU/WashU Med” in title (except for main university app)
Example of the WashU app icon on the home screen of an iPhone

Product Page

App Name

  • An app name can be up to 30 characters long
  • Change WUSTL to WashU to match brand guidelines
  • Have both WashU and WashU Med as options to use for app names on product page and icons

Subtitle

  • A subtitle is optional to add and can be up to 30 characters long
  • Use a subtitle to highlight features or typical uses of the app
    • It is intended to summarize the app in a concise phrase
  • The subtitle will appear in the “developer name” place after several seconds.
WashU mobile app Product page in the App Store

Resources

Use these resources to get all up-to-date icon sizes needed for your app’s platform.

Search for “line icons” on stock asset sites if you need help sourcing an icon.