ATOMS

Icons

Currently the icon sizes only work with custom icons, there appears to be a conflict with font sizes and font-awesome icons.

Icon sizes

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

Medium: Medium Plus: Large:

Responsive:

Sketch Component:
Icons_Sizes

Icons-contorion

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

bpja
01000000
02000000
03000000
04000000
05000000
07000000
080000000000
09000000
10000000
11000000
13000000
14000000
15000000
16000000
19000000
20000000
21000000
22000000
23000000
230000000000
250000000000
280000000000
300000000000
500000000000
account
add-wishlist
addtocart-icon
addwishlist
burger
cart-icon
contorion-c
contorion-merch
customer-data
fifteen-euro-coupon-icon
fifteen-euro-coupon
hamburger
harry-hammer
heart
logistic-icon
neutral
new
offers
order-approval
orders
overview
pdf
private-label-inverted
private-label
profi-store
reoccurring
ten-euro-coupon
time
unlucky
usersettings
very-happy
warenstapler
wishlist-icon

Responsive:

All our custom fonts that have been generated from our SVG files via build process.

Icons-font awesome

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

angle-down
angle-left
angle-right
angle-up
arrow-down
arrow-right
ban
bars
bell-slash
bell
book
bullhorn
calculator
calendar-check-o
caret-down
caret-right
check-square-o
check
chevron-down
chevron-left
chevron-right
chevron-up
circle
clock-o
close
code
cog
cogs
comments-o
comments
credit-card-alt
cube
cubes
desktop
download
envelope
euro
exchange
exclamation-triangle
facebook
fax
file-text
flag
floppy-o
folder-open
google-plus
history
info-circle
info
instagram
laptop
linkedin-square
linkedin
list-alt
list-ol
list
lock
map-marker
map-signs
minus
mobile-phone
mobile
paint-brush
pencil
percent
phone
pie-chart
play-circle-o
plus
print
question-circle
quote-left
quote-right
refresh
rocket
search-plus
search
shopping-basket
shopping-cart
sign-out
spinner
star-half-o
star-o
star
table
tag
tags
th-list
th
times-circle
times
trash-o
truck
usd
user
warning
whatsapp
wrench
youtube-play

Responsive:

Fonts from Font Awesome package that are being used in our system.

Svg icons

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

account
add-cart
add-wishlist
arrow-diagonal-left
arrows-bidirectional
barcode-scanner
bit-frearson
bit-hexpin
bit-inbus
bit-phillips-slot
bit-phillips-superdrive
bit-phillips
bit-pozidriv
bit-robertson
bit-slot
bit-spanner
bit-torq
bit-torx
bit-triwing
box
broom
c-plus
calculator
calendar
camera
canister
cart
chainlink-intertwined
chances
check-circle
check-shield
check-thick
chevron-down-thing
chevron-down
chevron-left-double
chevron-left-thin
chevron-left
chevron-right-double
chevron-right-thin
chevron-right
chevron-up-thin
chevron-up
clockwise-circle
clover
cog
communication
compressor
construction-worker
contorion
copy
counter-clockwise-circle
coupon
credit-card
customer-data
customer-gear
customer
de-country
doorhandle
double-heart
email
emoji-happy-outlined
emoji-neutral-outlined
emoji-unhappy-outlined
emoji-very-happy-outlined
emoji-very-unhappy-outlined
environment
eu-star
euro-hand
euro
exclamation-triangle
fa-chevron-down
fa-chevron-right
fa-percent
fa-tag
facebook
filter-circles
flag
flame
flower
folder
gear-wheel
gift
goals
hamburger
handshake-empty-filled
handshake-filled
headset-thick
heart-outlined
heart
helmet
house
info-circle
info
instagram
interdictory-circle
jumping-person
ladder
leaf
light-bulb
lightning
linkedin
lion
list-view
listing
location-pin
lock
logout
magnifier-long-handle
magnifier
mail
menu-burger
merchandise
minus
monitor-cursor
monitor-star
mouse-click
navigation-new
navigation-stier
new-chevron-left
new-chevron-right
offers
orders
overview
paper
pdf
pencil
percent
phone-hashtag
phone-signal
phone
piggybank
pipe
play-video
plus
price-tag
printer
protractor
quality
questionnaire
sawblade
screw
screwdriver-electric
shipment
star-hand
star-rating
thumbs-down
thumbs-up
tile-view
tools
trash-can
trolley
trophy
truck-fast
truck
usersettings
warenstapler
weldingtorch
wheel
wheelbarrow
whiteboard-chart-increase
wishlist-icon
xcross-circle
xcross
youtube

Responsive:

SVG Icons we can use in shop directly