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

Here’s a complete list of all the available Icons:

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

accessibility
accident-insurance
account-plus
accounts
addressbook
addressbook-active
ai
airplane
app-cards
app-icon
app-list
app-store-android
app-store-ios
arrow-down
arrow-fast-forward
arrow-left
arrow-out
arrow-reverse
arrow-right
arrow-up
arrow-up-down
arrow-up-down-active
arrows-collapse
arrows-expand
attachment
audio
bank
bank-guarantee
bank-guarantee-active
bankcard
bars-arrow-outline
bars-chart-increase
bars-chart-vertical
bars-check-outline
bars-line-chart-outline
bill-payment
block
bookmark
bookmark-active
briefcase
broken-glass
budget-status-exceeded
budget-status-ok
building-savings
building-savings-contract
building-society-loan
burinka
business
business-account-maxi
calendar
calendar-incoming
calendar-outgoing
calendar-reload
camera
camera-switch
car-insurance
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
cardtan
caret-down
caret-left
caret-right
caret-up
cart
cart-active
casualty-insurance
cat
charity
chart-horizontal
chart-round
chart-vertical
checkmark
checkmark-circle
clock
closed
coins-savings
comment
comment-active
comment-important
comments
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
direct-debit
direct-debit-incoming
direct-debit-outgoing
direct-debit-refused
direct-debit-sipo
discover
discover-active
dog
dot-large
drag-drop
drag-item
e-mail
edit
electricity
emoji-angry
emoji-happy
emoji-joy
emoji-okay
emoji-sad
empty-state-generic
emptystate DEPRECATED
error
error-circle
erste
euro
euro-convert
face-id
factory
feedback
file
file-active
file-download
file-download-active
file-locked
file-upload
filter
fingerprint
fire
flag
flag-placeholder
flash
flash-active
folder
folder-contract
folder-delete
folder-import
folder-invoice
folder-new
folder-personal
folder-photos
foreign-currency-account
foreign-currency-account-active
foreign-currency-account-business
freeze
fullscreen
geo-control
george DEPRECATED
george-logo
geu-service-b24
geu-service-blue
geu-service-mzf
geu-service-pzd
geu-service-s24
gold-bars
gridcard
group
hand-coin
hand-coins
hand-coins-active
hand-cursor
hand-money
hand-wallet
hands-outline
hashtag
health-insurance
heart
help
helpdesk
hilfreich
home
home-active
home-secondary
hospital
hospital-doctor
household-insurance
income-protection-insurance
info
insurance
insurance-plus
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
list
loan-reconstruction
location
lock-closed
lock-open
logout
luck
magic
mail
marketing-info
mastercard
media-pause
media-play
media-stop
menu
micro-insurance
minus
minus-filled
mobile-nfc-payment
mobile-payment DEPRECATED
mobile-top-up
money
money-active
more-horizontal
more-vertical
multibanking-sync
natural-disaster
new
newsletter
notification
offer
orders
palette
parachute
pattern
pay-save
payment-full
payment-partial
payment-protection-insurance
payment-slip
pennies-on-click
pension
pension-insurance
pension-savings
pension-template DEPRECATED
pet-insurance
pfm-accessories
pfm-accomodation
pfm-additional-incoming
pfm-additional-outgoing
pfm-alimony
pfm-alimony-legal
pfm-amazon
pfm-amusement
pfm-atm DEPRECATED
pfm-betting
pfm-books
pfm-cafe
pfm-capitalisation
pfm-car
pfm-cash
pfm-children DEPRECATED
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-holiday
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-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
product-sorting
products
property-insurance
qr-code
rainbow
redo
reload
reply
reward-badge
risk-life-insurance
robbery
rocket
rocking-chair
ropay
rounding-hilfreich
s-id-app
salary-template DEPRECATED
savings
search
security-diamond
security-good
security-star
security-user
security-warning
selection
set-aside
settings
sg-electronics DEPRECATED
sg-furniture DEPRECATED
sg-gifts-and-parties DEPRECATED
sg-sports-equipment DEPRECATED
sg-white-goods DEPRECATED
share
share-android
share-ios
shopping
show-off
show-on
sign
sign-active
sms-code
social-insurance
sparkasse
standing-order
star
star-filled
sticker-info
student
sum
sweep DEPRECATED
sweep-order
sweep-order-active
tag
template
template-pension
template-salary
text
thumb-down
thumb-up
toilet
travel-insurance
triangle-double
truck
tutorial
unemployment
unread
user
user-add
user-check
user-edit
van
virtual-bankcard
virtual-creditcard
visacard
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
world
zoom-in
zoom-out