Buttons including SVG icons
Orange Action Hover Button (.orange-action-hover-btn) / White background
pdf white
icon-pdf-white
cart white
icon-cart-white
word white
icon-word-white
excel white
icon-excel-white
powerpoint white
icon-powerpoint-white
zip white
icon-zip-white
blanc doc white
icon-blanc-doc-white
Grey Action Button (.grey-action-btn) / White background
pdf black
icon-pdf-black
cart black
icon-cart-black
word black
icon-word-black
excel black
icon-excel-black
powerpoint black
icon-powerpoint-black
zip black
icon-zip-black
blanc doc black
icon-blanc-doc-black
Orange Action Button (.orange-action-btn) / Orange background
pdf white
icon-pdf-white
cart white
icon-cart-white
word white
icon-word-white
excel white
icon-excel-white
powerpoint white
icon-powerpoint-white
zip white
icon-zip-white
blanc doc white
icon-blanc-doc-white
Grey Action Button (.grey-action-btn) / Grey background
pdf black
icon-pdf-black
cart black
icon-cart-black
word black
icon-word-black
excel black
icon-excel-black
powerpoint black
icon-powerpoint-black
zip black
icon-zip-black
blanc doc black
icon-blanc-doc-black
Universallinks
Showcase for universal link design.
| Name | Buttonlink #1 | Buttonlink #2 | Buttonlink #3 | Buttonlink #4 | Textlink #1 | Textlink #2 | Textlink #3 | InnerTextlink #1 | InnerTextlink #2 | InnerTextlink #3 |
|---|---|---|---|---|---|---|---|---|---|---|
| 360° Image | Call to action | Call to action | Call to action | Call to action | Link | Link | Link |
lorem ipsum
Link
|
lorem ipsum
Link
|
lorem ipsum
Link
|
| PIM Produkt | Call to action | Call to action | Call to action | Call to action | Link | Link | Link |
lorem ipsum
Link
|
lorem ipsum
Link
|
lorem ipsum
Link
|
| Externer Link | Call to action | Call to action | Call to action | Call to action | Link | Link | Link |
lorem ipsum
Link
|
lorem ipsum
Link
|
lorem ipsum
Link
|
| Interner Link | Call to action | Call to action | Call to action | Call to action | Link | Link | Link |
lorem ipsum
Link
|
lorem ipsum
Link
|
lorem ipsum
Link
|
| Anker Link | Call to action | Call to action | Call to action | Call to action | Link | Link | Link |
lorem ipsum
Link
|
lorem ipsum
Link
|
lorem ipsum
Link
|
| Download Link | PDF Download | PDF Download | PDF Download | PDF Download | PDF Download | PDF Download | PDF Download | |||
| Buy now | Buy now | Buy now | Buy now | Buy now | Buy now | Buy now | Buy now | |||
| SVG-Test | Buy now | Buy now | Buy now | Buy now | Buy now | Buy now | Buy now | |||
| Beschreibung Osram Style | border: white bg: orange text: white hover border: orange hover bg: white hover text: orange |
border: gray bg: transparent text: gray hover border: orange hover bg: orange hover text: white |
border: white bg: orange text: white hover border: white hover bg: white hover text: orange |
border: black bg: gray text: black hover border: orange hover bg: orange hover text: white |
icon: orange bg: transparent text: black hover icon: orange hover bg: none hover text: orange |
icon: white bg: orange/coloured text: white hover icon: black hover bg: none hover text: black |
icon: orange bg: gray text: black hover icon: orange hover bg: none hover text: black |
icon: none bg: transparent text: orange underlined hover icon: none hover bg: none hover text: black underlined |
icon: none bg: orange text: white underlined hover icon: none hover bg: none hover text: black underlined |
icon: none bg: gray text: black underlined hover icon: none hover bg: none hover text: orange underlined |
| Beschreibung BAG Style | border: white bg: green text: white hover border: green hover bg: white hover text: green |
border: gray bg: transparent text: gray hover border: green hover bg: green hover text: white |
border: white bg: green text: white hover border: white hover bg: white hover text: green |
border: black bg: gray text: black hover border: green hover bg: green hover text: white |
icon: green bg: transparent text: gray hover icon: green hover bg: none hover text: green |
icon: white bg: green/coloured text: white hover icon: black hover bg: none hover text: black |
icon: green bg: gray text: black hover icon: green hover bg: none hover text: green |
icon: none bg: transparent text: green underlined hover icon: none hover bg: transparent hover text: black underlined |
icon: none bg: green text: white underlined hover icon: none hover bg: none hover text: dark gray underlined |
icon: none bg: gray text: black underlined hover icon: none hover bg: none hover text: green underlined |
SVG Icons
Single Color Icons
add
icon-add
application office
icon-application-office
application agriculture
icon-application-agriculture
application auto transportation
icon-application-auto-transportation
application home
icon-application-home
application industry
icon-application-industry
application medical
icon-application-medical
application public places
icon-application-public-places
application retail shop
icon-application-retail-shop
application wearable mobile
icon-application-wearable-mobile
availability
icon-availability
bad
icon-bad
battery
icon-battery
big arrow back
icon-big-arrow-back
big arrow forward
icon-big-arrow-forward
big close
icon-big-close
big minus
icon-big-minus
big plus
icon-big-plus
big sort down
icon-big-sort-down
big sort high
icon-big-sort-high
bluetooth abled
icon-bluetooth-abled
bluetooth disabled
icon-bluetooth-disabled
bluetooth search
icon-bluetooth-search
bookmark active
icon-bookmark-active
bookmark inactive
icon-bookmark-inactive
break
icon-break
bulgaria leva bgn
icon-bulgaria-leva-bgn
bullet active
icon-bullet-active
bullet inactive
icon-bullet-inactive
calendar
icon-calendar
cambodia cr khr
icon-cambodia_cr_khr
campione fr chf
icon-campione_fr_chf
cancel
icon-cancel
chat
icon-chat
check no
icon-check-no
check not possible
icon-check-not-possible
check yes
icon-check-yes
checkbox active
icon-checkbox-active
checkbox inactive
icon-checkbox-inactive
china cny
icon-china___cny
compare
icon-compare
contact
icon-contact
copy
icon-copy
croatia kn hrk
icon-croatia-kn-hrk
czech republic czk
icon-czech-republic-czk
delete
icon-delete
denmark kr dkk
icon-denmark_kr_dkk
device information
icon-device-information
device unknown
icon-device-unknown
dialux
icon-dialux
document
icon-document
download
icon-download
edit
icon-edit
email
icon-email
energylabel
icon-energylabel
euro eur
icon-euro-eur
eye invisible
icon-eye-invisible
eye visible
icon-eye-visible
flag
icon-flag
folder
icon-folder
free text
icon-free-text
global
icon-global
good
icon-good
help
icon-help
hungary ft huf
icon-hungary_ft_huf
image
icon-image
image upload
icon-image-upload
info
icon-info
information
icon-information
japan jpy
icon-japan___jpy
jumptotop
icon-jumptotop
load
icon-load
locked
icon-locked
logout
icon-logout
malaysia rm myr
icon-malaysia_rm_myr
microphone
icon-microphone
neutral
icon-neutral
no picture
icon-no-picture
paste
icon-paste
philippines php
icon-philippines___php
place
icon-place
play
icon-play
play video
icon-play-video
plus
icon-plus
poland pln
icon-poland_pln
power reboot
icon-power-reboot
price tag
icon-price-tag
print
icon-print
products
icon-products
products automotive
icon-products-automotive
profile
icon-profile
radiobutton active
icon-radiobutton-active
radiobutton inactive
icon-radiobutton-inactive
relux
icon-relux
reminder
icon-reminder
review active
icon-review-active
review inactive
icon-review-inactive
romania leu ron
icon-romania_leu_ron
russia rub
icon-russia___rub
save
icon-save
service
icon-service
setting
icon-setting
shape basics
icon-shape-basics
shape circle
icon-shape-circle
shape oval
icon-shape-oval
shape square
icon-shape-square
shape triangle
icon-shape-triangle
share
icon-share
small arrow back
icon-small-arrow-back
small arrow forward
icon-small-arrow-forward
small close 2
icon-small-close-2
small minus
icon-small-minus
small plus
icon-small-plus
small sort down
icon-small-sort-down
small sort high
icon-small-sort-high
software update
icon-software-update
stage anchorlink
icon-stage-anchorlink
status circle
icon-status-circle
status discontinued
icon-status-discontinued
status full production
icon-status-full-production
status not for new design
icon-status-not-for-new-design
status orders still accepted
icon-status-orders-still-accepted
status prelimenary
icon-status-prelimenary
stop
icon-stop
sweden kr sek
icon-sweden_kr_sek
taiwan nt twd
icon-taiwan_nt__twd
thailand thb
icon-thailand___thb
thermomoter
icon-thermomoter
timer
icon-timer
timor leste us usd
icon-timor-leste_us__usd
toggle active
icon-toggle-active
toggle inactive
icon-toggle-inactive
tool
icon-tool
turkey t try
icon-turkey_t_try
united kingdom gbp
icon-united-kingdom-gbp
very bad
icon-very-bad
very good
icon-very-good
warning
icon-warning
wifi
icon-wifi
wifi bar empty
icon-wifi-bar-empty
wifi bar full
icon-wifi-bar-full
wifi bar high
icon-wifi-bar-high
wifi bar low
icon-wifi-bar-low
wifi bar mid
icon-wifi-bar-mid
SVG Icons
Icons can be embedded using the following code where class is the value in the column header of the following table and icon-name is the value below the icon in table.
<svg class="svg-icon class"> <use xlink:href="/_resources/images/icons/osram-svg-icons.svg#icon-name"></use></svg>
Example:
<svg class="svg-icon svg-icon-orange"> <use xlink:href="/_resources/images/icons/osram-svg-icons.svg#svg-icon_blank-doc"></use></svg>
| svg-icon-orange | svg-icon-white | svg-icon-black | |
|---|---|---|---|
| blank doc | svg-icon_blank-doc | svg-icon_blank-doc | svg-icon_blank-doc |
| cart | svg-icon_cart | svg-icon_cart | svg-icon_cart |
| configurate | svg-icon_configurate | svg-icon_configurate | svg-icon_configurate |
| excel | svg-icon_excel | svg-icon_excel | svg-icon_excel |
| gallery view | svg-icon_result-gallery | svg-icon_result-gallery | svg-icon_result-gallery |
| home | svg-icon_home | svg-icon_home | svg-icon_home-svg-icon-white |
| link | svg-icon_link | svg-icon_link | svg-icon_link |
| login | svg-icon_login | svg-icon_login | svg-icon_login |
| loupe | svg-icon_loupe | svg-icon_loupe | svg-icon_loupe |
| svg-icon_pdf | svg-icon_pdf | svg-icon_pdf | |
| powerpoint | svg-icon_powerpoint | svg-icon_powerpoint | svg-icon_powerpoint |
| sort | svg-icon_sort | svg-icon_sort | svg-icon_sort |
| video | svg-icon_video | svg-icon_video | svg-icon_video |
| word | svg-icon_word | svg-icon_word | svg-icon_word |
| zip | svg-icon_zip | svg-icon_zip | svg-icon_zip |