Design Guide – v. 7.1.1

Iconography

Newly updated

At Swedbank Pay we use Material icons from Material Design, but we also include icons for well-known payment providers, and flags for most nations in the world. All icons are integrated and are available in HTML and CSS.

Material Outlined Icons

We primarily use the version called Outlined in the Material icons to avoid a to heavy look. For a full overview of the available icons, please, visit the Material.io.

Material Icons Overview

Example of how to implement icons

To use an icon, provide the following markup: {icon_name}

insert_invitation

cake

mood

thumb_up_alt

whatshot

HTML

<i class="material-icons" aria-hidden="true">insert_invitation</i>
<i class="material-icons" aria-hidden="true">cake</i>
<i class="material-icons" aria-hidden="true">mood</i>
<i class="material-icons" aria-hidden="true">thumb_up_alt</i>
<i class="material-icons" aria-hidden="true">whatshot</i>

Card icons

Card icons are typically used to show users which card providers that are available. The payment-card icon can be used as a placeholder and/or when the card is not recognized.

Example of how to implement card icons

To use an icon, provide the following markup: 

Icon	Card type	Code
	Payment card	`payment-card`
	American Expres	`amex`
	Bank Accept	`bank-axept`
	Coop	`coop`
	Dankort	`dankort`
	Diners Club	`diners`
	Forbrugsforeningen	`forbrugsforeningen`
	ICA	`ica`
	ICA Banken	`ica-banken`
	Ikano Bank	`ikano-bank`
	JCB	`jcb`
	Lindex	`lindex`
	Maestro	`maestro`
	Mastercard	`mastercard`
	Visa	`visa`

HTML

<i class="payment-icon payment-icon-payment-card" aria-hidden="true"></i>
<i class="payment-icon payment-icon-amex" aria-hidden="true"></i>
<i class="payment-icon payment-icon-bank-axept" aria-hidden="true"></i>
<i class="payment-icon payment-icon-coop" aria-hidden="true"></i>
<i class="payment-icon payment-icon-dankort" aria-hidden="true"></i>
<i class="payment-icon payment-icon-diners" aria-hidden="true"></i>
<i class="payment-icon payment-icon-forbrugsforeningen" aria-hidden="true"></i>
<i class="payment-icon payment-icon-ica" aria-hidden="true"></i>
<i class="payment-icon payment-icon-ica-banken" aria-hidden="true"></i>
<i class="payment-icon payment-icon-ikano-bank" aria-hidden="true"></i>
<i class="payment-icon payment-icon-jcb" aria-hidden="true"></i>
<i class="payment-icon payment-icon-lindex" aria-hidden="true"></i>
<i class="payment-icon payment-icon-maestro" aria-hidden="true"></i>
<i class="payment-icon payment-icon-mastercard" aria-hidden="true"></i>
<i class="payment-icon payment-icon-visa" aria-hidden="true"></i>

Payment icons

Below is a list of payment icons that we use in our products. Be mindful when using payment logotypes. Try to make the payment icon feel more secondary in combination with the Swedbank Pay logotype. We always want the Swedbank Pay logotype to be primary.

Example of how to implement payment icons

To use an icon, provide the following markup: 

Icon	Payment method	Code
	Viabill	`viabill`
	Vipps	`vipps`
	Swish	`swish`
	MobilePay	`mobilepay`
	CarPay	`carpay`
	Trustly	`trustly`

HTML

<i class="payment-icon payment-icon-viabill" aria-hidden="true"></i>
<i class="payment-icon payment-icon-vipps" aria-hidden="true"></i>
<i class="payment-icon payment-icon-swish" aria-hidden="true"></i>
<i class="payment-icon payment-icon-mobilepay" aria-hidden="true"></i>
<i class="payment-icon payment-icon-carpay" aria-hidden="true"></i>
<i class="payment-icon payment-icon-trustly" aria-hidden="true"></i>

Flags

Below is a list of flag icons that we use in our system, To use the flag icons add the classes .flag-icon and .flag-icon-xx (where xx is the ISO_3166-1-alpha-2-code of a country) to an empty 

Icon	Country	Code
	Norway	`no`
	Sweden	`se`
	Denmark	`dk`
	Finland	`fi`
	EU	`eu`

HTML

<i class="flag-icon flag-icon-no" aria-hidden="true"></i>
<i class="flag-icon flag-icon-se" aria-hidden="true"></i>
<i class="flag-icon flag-icon-dk" aria-hidden="true"></i>
<i class="flag-icon flag-icon-fi" aria-hidden="true"></i>
<i class="flag-icon flag-icon-eu" aria-hidden="true"></i>

Sizes

All size available for the flags are pre-defined and are shown below. Tiny is the default size and for example is used input fields.

tiny

small

medium

large

huge

HTML

<i class="flag-icon flag-icon-no flag-icon-tiny" aria-hidden="true"></i>
<i class="flag-icon flag-icon-se flag-icon-small" aria-hidden="true"></i>
<i class="flag-icon flag-icon-dk flag-icon-medium" aria-hidden="true"></i>
<i class="flag-icon flag-icon-fi flag-icon-large" aria-hidden="true"></i>
<i class="flag-icon flag-icon-eu flag-icon-huge" aria-hidden="true"></i>

Squared

All flags can be used in a square format. In the example we see squared flags in the size tiny. All predefined sizes are available in combination with .flag-icon-squared.

tiny

small

medium

large

huge

HTML

<i class="flag-icon flag-icon-squared flag-icon-no flag-icon-tiny" aria-hidden="true"></i>
<i class="flag-icon flag-icon-squared flag-icon-se flag-icon-small" aria-hidden="true"></i>
<i class="flag-icon flag-icon-squared flag-icon-dk flag-icon-medium" aria-hidden="true"></i>
<i class="flag-icon flag-icon-squared flag-icon-fi flag-icon-large" aria-hidden="true"></i>
<i class="flag-icon flag-icon-squared flag-icon-eu flag-icon-huge" aria-hidden="true"></i>