BumblebeeBumblebee

Icon

Contents

Live demoDesignCode

Live demo

icon examples
Icon namexsmallsmallmediumlarge
AlertIcon
InfoIcon
ChevronDownIcon
icon examples
Icon typeerrorwarninginfo
InfoIcon Type

Mono icons

AddIcon
AddPersonIcon
AlertCircleIcon
AlertIcon
AlertsIcon
BankIcon
BumblebeeIcon
BurgerIcon
BusinessIcon
CalendarIcon
CardIcon
ChevronDownIcon
ChevronLeftEndIcon
ChevronLeftIcon
ChevronRightBreadcrumbIcon
ChevronRightEndIcon
ChevronRightIcon
ChevronUpIcon
CloseIcon
CopyIcon
CorrectIcon
DeleteIcon
DocumentIcon
DownloadIcon
EditIcon
EmptyCheck
EmptyCheckIcon
ExternalLinkIcon
FilledCheckIcon
HideIcon
IncorrectIcon
InfoIcon
KebabIcon
LogOutIcon
MeatballsIcon
MinusCircleIcon
PersonIcon
ProfileIcon
QuestionIcon
SafetyIcon
SearchIcon
ShowIcon
TickIcon
PlusIcon

Multi-coloured icons

DocumentUploaded
DocumentUploading

Bank logos

Atom BankAtom
Bank of ScotlandBankOfScotland
BarclaysBarclays
ClearbankClearbank
Halifax BankHalifax
HSBCHsbc
Lloyds BankLloyds
Metro BankMetro
Monzo BankMonzo
N26N26
Nationwide Building SocietyNationwide
Natwest BankNatwest
placeholderBankPlaceholder
RBSRbs
RevolutRevolut
Santander BankSantander
Standard Chartered BankStandardCharteredBank
Starling BankStarling
Tandem BankTandem
TransferwiseTransferwise
TSBTsb
Virgin BankVirgin

Country flags

Brazil
Canada
European Union
Switzerland
United Kingdom
United States

Intro icons

Bank
Identity
Money
Company

Image import example

Code

import {Monzo} from '@shieldpay/bumblebee/images';

const images = [
  { name: 'Monzo', image: Monzo },
];

<Monzo>

Icon import example

Code

import { ChevronDownIcon } from '@shieldpay/bumblebee/icons';

<ChevronDownIcon size="s" color="neutral250"/>
<ChevronDownIcon size="m" color="primary500"/>
<ChevronDownIcon size="l" />