The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
EOS Design System logotype

Logo icon set

Our set of third-party logos follows the EOS design guidelines and integrates coherently in SUSE applications.


search

get_appDownload icon

Please follow our guidelines when implementing this icon.

close

Logo icon wrapper

Most logos aren't created to be visible in small sizes. A wrapper helps improving visibility when using logos as icons.

Size

When a wrapper is present, its size should be the icon size and the logo inside should be one scale less. For example, a 36px logo icon with a wrapper is composed of a 36px wrapper and a 24px icon inside.

Logo icon sizing examples
Type

For some situations (such as social network links) we can use a square wrapper as well. Square with 0px or 2px rounded borders only.

Implementation of logo icon dark wrapper
content_copy
<img src='gitlab-white.svg' class='eos-36 eos-dark-wrapper logo logo-square'/>
<img src='gitlab-white.svg' class='eos-36 eos-dark-wrapper logo logo-round'/>
Implementation of logo icon light wrapper
content_copy
<img src='gitlab-dark.svg' class='eos-36 eos-light-wrapper logo logo-square'/>
<img src='gitlab-dark.svg' class='eos-36 eos-light-wrapper logo logo-round'/>