Icon

This page covers pictographs of all kind used throughout George.

Sizes

George uses the following set of image/icon sizes and provides matching resizing-classes. Elements in GDS make only use of those limited set of sizes.

You can also assign the available sizes manually to any kind of icon/image by using the following .g-image-* classes:

Loading demo…

DEPRECATED Icon size 20px is no longer used.

HINT The pixel sizes refer to the boundary box of the image. If an icon/SVG has spacing/padding already inside the image file, then the icon will appear slightly smaller.

Icons in text

16px icons can be used directly in sentences and automatically match their vertical alignment to match the text’s baseline when used from within a <p>, <li> or <a>:

Loading demo…

Embedding icons

George uses SVG sprites to embed images in web pages. Since George is a single-page app, the SVG is embedded using display:none in the main page:

html<html lang="en">
    <head />
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }}>
            <symbol id="ico-placeholder" viewBox="0 0 512 512">
                <path d="..." />
            </symbol>
            <symbol id="ico-other">...</symbol>
        </svg>
    </body>
</html>

To actually use a SVG from this sprite, use the following <svg><use></use></svg> snippet, using the proper icon name instead of ico-placehoder:

Loading demo…

Download the SVG sprites here:

download SVG

Available icons

CAUTION Changing icon names can disrupt application functionality. To ensure compatibility, we generally cannot approve name change requests.

HINT To request a new icon, create a Jira issue. Follow the GDS Jira contribution guide for details.

The list below includes all Icon assets supported by george-assets v1.0.0-beta.41:

Icon name	Sizes: 16, 24	Sizes: 48, 64, 96, 128

accessibility
accident-insurance
accounts
account-plus
addressbook
addressbook-active
ai
airplane
ai-chat
app-cards
app-icon
app-list
app-store-android
app-store-ios
arrows-collapse
arrows-expand
arrow-down
arrow-fast-forward
arrow-left
arrow-out
arrow-reverse
arrow-right
arrow-up
arrow-up-down
arrow-up-down-active
attachment
audio
bank
bankcard
bank-guarantee
bank-guarantee-active
bank-reload
barcode
bars-arrow-outline
bars-chart-increase
bars-chart-vertical
bars-check-outline
bars-line-chart-outline
bill-payment
block
bluetooth
bluetooth-off
bookmark
bookmark-active
briefcase
briefcase-active
broken-glass
budget-status-exceeded
budget-status-info
budget-status-ok
budget-status-unknown
budget-status-warning
building-savings
building-savings-contract
building-society-loan
burinka
business
business-account-maxi
calendar
calendar-incoming
calendar-outgoing
calendar-reload
camera
camera-add
camera-switch
cardtan
card-activate
card-additional
card-additional-active
card-creditcard
card-healthinsurance
card-id
card-new
card-payment-acceptance
card-remove
card-replacement
card-settings
card-topup
caret-double-left
caret-double-right
caret-down
caret-left
caret-right
caret-up
cart
cart-active
car-accident
car-electric
car-insurance
car-loan
cashback
cashback-activate
cashback-pay
cashback-receive
casualty-insurance
cat
charity
chart-horizontal
chart-round
chart-vertical
chat
checkmark
checkmark-circle
checkmark-circle-filled
clear-filled
clicktopay
clock
close
closed
cloud
coins-invest
coins-savings
comment
comments
comment-active
comment-important
computer-1
computer-2
conseq
contactless
cookie
copy
creditcard-additional
cross-link
current-location
debitmobile-android
debitmobile-band
debitmobile-sticker
delete
devices
diamond
digger
dinerscard
directions
direct-debit
direct-debit-incoming
direct-debit-outgoing
direct-debit-refused
direct-debit-sipo
discover
discover-active
dog
dot-large
drag-drop
drag-item
edit
electricity
emoji-angry
emoji-happy
emoji-joy
emoji-okay
emoji-sad
empty-state-generic
error
error-circle
erste
euro
euro-convert
exclamation-mark
external-investments
external-investments-add
e-mail
facebook
face-id
factory
feedback
file
file-active
file-doc
file-docx
file-download
file-download-active
file-locked
file-pdf
file-ppt
file-pptx
file-rtf
file-security
file-txt
file-upload
file-xls
file-xlsx
filter
fingerprint
fire
fit-good-fill
fit-good-outline
flag
flag-placeholder
flash
flash-active
folder
folder-contract
folder-delete
folder-import
folder-invoice
folder-new
folder-personal
folder-photos
folder-storage
font
foreign-currency-account
foreign-currency-account-active
foreign-currency-account-business
freeze
fullscreen
george-id
george-logo
geo-control
geu-service-b24
geu-service-blue
geu-service-mzf
geu-service-pzd
geu-service-s24
ghost
gift-active
gold-bars
gridcard
group
hands-outline
hand-coin
hand-coins
hand-coins-active
hand-cursor
hand-money
hand-wallet
hashtag
headphones
health-insurance
hearing-aid
heart
help
helpdesk
help-active
hilfreich
home
home-active
home-interest
home-money
home-secondary
hospital
hospital-doctor
household-insurance
income-protection-insurance
info
info-active
instagram
insurance
insurance-plus
invite-others
invoice
invoice-active
invoice-digital
invoice-postal
key
keyboard
kids-outline
leaf
leakage
liability
liability-insurance
life-health-insurance
life-insurance
lightbulb
line-dotted
line-filled
link
linkedin
list
loan-reconstruction
location
lock-closed
lock-open
logout
luck
magic
mail
mail-check
marketing-info
mastercard
media-pause
media-play
media-stop
menu
microphone
microphone-filled
microphone-off
micro-insurance
minus
minus-filled
mobile-nfc-payment
mobile-top-up
money
money-active
money-card
more-horizontal
more-ios
more-vertical
natural-disaster
new
newsletter
notification
offer
order-arrow-right
order-arrow-up
o-two
palette
parachute
pattern
payme
payment-full
payment-partial
payment-protection-insurance
payment-slip
pay-save
pennies-on-click
pension
pension-insurance
pension-savings
pet-insurance
pfm-accessories
pfm-accomodation
pfm-additional-incoming
pfm-additional-outgoing
pfm-alimony
pfm-alimony-legal
pfm-amazon
pfm-amusement
pfm-betting
pfm-books
pfm-cafe
pfm-capitalisation
pfm-car
pfm-cash
pfm-cleaning
pfm-clothing
pfm-cosmetics
pfm-crypto
pfm-debt-collection
pfm-doctor
pfm-drugstore
pfm-education
pfm-education-active
pfm-electronics
pfm-fashion
pfm-fees
pfm-food
pfm-fuel
pfm-games
pfm-google
pfm-health
pfm-hobby
pfm-holidays
pfm-interest
pfm-leisure
pfm-living
pfm-media
pfm-online
pfm-other-incoming
pfm-other-outgoing
pfm-other-outgoing-active
pfm-other-transport
pfm-parking
pfm-pet
pfm-pharmacy
pfm-pocketmoney
pfm-public-transport
pfm-school
pfm-service
pfm-sewer
pfm-shoes
pfm-sport
pfm-tabacco
pfm-taxes
pfm-taxi
pfm-tolls
pfm-travel-expenses
pfm-uncategorised-incoming
pfm-uncategorised-outgoing
pfm-waste
pfm-withdrawal
phone-check
phone-earpiece
phone-end-call
phone-filled
phone-hotline
phone-insurance
phone-mobile
phone-warning
photo
pin
placeholder
plugin-budgets
plugin-filetransfer
plugin-giftcard
plugin-moneyback
plugin-multibanking
plugin-pro
plugin-remember-to-pay
plugin-safe
plugin-snapshot
plugin-whatif
plus
plus-circle
plus-filled
portfolio
portfolio-active
print
products
product-sorting
property-insurance
pro-dashboard-active
pro-dashboard-default
pro-invoices-active
pro-invoices-default
pro-profile-active
pro-profile-default
qr-code
rainbow
redo
reload
reply
reward-badge
ribbon-info-filled
ribbon-success-filled
risk-life-insurance
robbery
rocket
rocket-filled
rocking-chair
ropay
rounding-hilfreich
rs-ips
rs-prenesi
savings
screen-share
screen-share-stop
search
security-diamond
security-good
security-star
security-user
security-warning
selection
send
send-active
settings
set-aside
share
share-android
share-ios
shopping
show-off
show-on
sidentity-logo
sign
sign-active
sms-code
social-insurance
sparkasse
standing-order
star
star-filled
sticker-info
store
student
sum
sweep-order
sweep-order-active
s-id-app
tag
template
template-pension
template-salary
text
thumb-down
thumb-down-filled
thumb-up
thumb-up-filled
tiktok
toilet
travel-insurance
triangle-double
triangle-down-filled
triangle-up-filled
truck
tutorial
twitter
unemployment
unread
usb-drive
usb-drive-george
user
user-active
user-add
user-check
user-clock
user-edit
user-error
van
video-call
video-call-filled
video-call-off
virtual-bankcard
virtual-card-single-use
virtual-creditcard
visacard
volume-bluetooth
volume-off
volume-up
volume-usb
wallet
wallet-insurance
warning
warning-active
watch-nfc-payment
water
web-cards
web-cards-new
web-cards-new-active
web-list
web-list-new
web-list-new-active
wheelchair
wifi
wifi-off
world
youtube
zoom-in
zoom-out