Alert Avatar SizesMediaTypesSingleDoubleInteractionAccessibilityAvailability Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Avatar

An avatar is a representation of a unique entity — like a person, a business, or an object. It can contain initials, images, icons, or flags.

Avatar
Sizes

Supported sizes are 16, 24, 32, 40, 48, 56, 
and 72.

Avatar sizes
Media

There are 4 media types available for avatar. Image, flag, icon and text.

Avatar with image
Image

Avatars can have an image. Can be uploaded by the user or representation of a partner by utilising their logo.

Avatar with flag
Flag

Flags allow us to visually communicate countries 
and currencies.

Avatar with clock icon
Icon

Icons are used to illustrate information or as an entry point.

Avatar with AA text
Text

If the user profile image is unavailable, a fallback up to two numerical characters can be used instead.

Image

Images are used to represent either a person or a brand by utilising their logo.

  • If no profile image is available fallback to initials on the text avatar type.
  • If no logo is available fallback to category icon on the icon type.
  • Do not stretch or allow logos to bleed outside of the avatar shape.

Avatar with image to avatar with initials

If no profile image is available fallback to initials on the text avatar type.

Avatar google logo to avatar with shopping bag icon

If no logo is available fallback to category icon on the icon type.

Avatars with airbnb, google and coop logos

Logo should be recognisable inside of the shape.

Avatars with airbnb, google and coop logos all stretched or oversized

Do not stretch or allow logos to bleed outside of the avatar shape or use images with transparent backgrounds.

Flag

Flags are used to represent either a currency or a country. We support all global flags in our libraries.

Avatars with different world flags

Icon

Icons are used to illustrate information or as an entry point.

Icon avatars come in an interactive and non interactive state, see more information under interaction.

  • Use icons that clearly represent the action being presented.

Avatars with different category icons

Used to represent categories

Avatar in an activity list item

Used as standalone to support other content

Text

Text is used to represent a person or to showcase there are more than 2 items in a collection on a double avatar.

Text avatars come in an interactive and non interactive state, see more information under interaction.

Size 16 avatar does not support the text variant as it doesn’t pass accessibility standards.

  • Use text for initials
  • Use text to reflect more than 2 items in a double avatar
  • When you need to display more than 9 additional items display it as +9
  • Don’t add more than 2 characters

Avatar with JW initials

Text can be used for initials

Double avatar with +3 text

Text can be used to represent a number of items behind an avatar

Double avatar with more than 2 characters

Don’t add more than 2 characters.

Double avatar with 2 characters

When you need to display more than 9 additional items display it as +9

Types

There are 2 different types of avatar with multiple subtypes underneath each.

Avatar with EU flag
Single
Double avatar with photo and UK flag
Double
Single

There are 3 types of single avatar, standalone, with a badge or with a notifications.

Avatar with snowflake icon
Standalone
Avatar with image and fast flag badge
With badge
Avatar with FG initials and a notification
With notification

Standalone

When you need to make it easier for a user to identify content, like a recipient or currency.

Wise launchpad home screen on desktop

Used on list items to visually elevate and support the information.

With badge

Badges contain additional information to support avatars, such as flags, the Wise logo, images, statuses actions and references.

There are 6 different types of badges you can use.

Avatar with flag badge
Flag

Used to represent currency or country

Avatar with image and fast flag badge
Fast flag

Used to represent a Wise account.

Avatar with image and google badge
Image

Used to represent other brands

Avatar with different status badges
Status

Used to represent status.

Avatar with plus action
Action

Used to indicate a supporting action.

Avatar with a reference icon badge
Reference

Used as a reference to an action already taken.

Avatars being used in lists and standalone

Use on activity list, navigation option or standalone avatars.

Avatar with two badges

Don’t use more than one badge in the avatar.

With notification

Notifications are used to indicate to the user that there is a notification behind the avatar that requires their attention.

These are primarily used for the profile avatar.

Profile avatar with notification

Notification usage on the profile avatar.

Double

Double avatars are used when you need to display more than one avatar at the same level of hierarchy.

This can be useful for representing recipient and currency or for currency conversion.

Double horizontal with image and flag
Horizontal
Double diagonal avatar with two flags
Diagonal

Double horizontal

When you don’t need to retain width alignment with other avatars to keep content aligned — for example in action buttons or tables.

Double horizontal avatar with image and flag

Double horizontal avatars are used to represent two related items on the same level of hierarchy within variable width content.

Double avatar on a table

Use within variable width content where there is no impact on the visual alignment.

Double horizontal avatar on list item

Don’t use a double horizontal avatar if it affects the content alignment, such as in a navigation option.

Double horizontal avatar with image and text

Use the second avatar to highlight when you need to communicate more than 2.

Four avatars stacked horizontally

Don’t use more than 2 avatars.

Double diagonal

Use when you need to retain width alignment with other avatars — for example in navigation options.

Double diagonal avatar with flags

Double diagonal avatars are used to represent two related items on the same level of hierarchy and take up the same space as a standalone avatar.

Double diagonal avatar on a list item

Use when content alignment needs to remain the same.

Double diagonal avatar in a button

Don’t use on variable width components where there is room to grow.

Interaction

Avatar is used as supporting information, and can be interactive depending on the content it’s paired with or the context it’s in.

  • Use interactive avatar as a standalone interactive component acting as a button.
  • If the avatar is sitting in an interactive surface use a non-interactive avatar.

These rules only apply to the initials and icon variation of avatar.

Interactive avatar as profile

Use the interactive background for standalone avatars that are interactive, like the profile avatar.

Non interactive avatar on list item

Use a non-interactive avatar when it sits on top of interactive surface like navigation option.

Interactive avatar on list item

Don’t use interactive avatars layered on top of interactive content, like navigation option.

Selected

Avatars have an optional selected state which can be used when you’re selecting from a list of options. For example choosing a spending category or an icon for your Jar.

Selectable avatars always need to use the interactive background state.

Collection of categories using the interactive avatar

Use the interactive avatar for selectable avatars.

Collection of category avatars using the non interactive avatar

Don’t use non-interactive background for non selected or selected state.

Accessibility

Never use an avatar in isolation without copy or interaction cues (such as a chevron icon). This is so that they are clearly identifiable, and aid comprehension and interaction.

Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation