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

Icon buttons

There are a lot of benefits of using icon buttons. Icons accompanied by labels make information easier to find and scan. Only icon buttons can be compact enough to allow toolbars, tables amongst other elements, using many icon buttons in a relatively small space.


Buttons with icon

Using icons in buttons can help to enhance the user experience. Buttons with icons should have a corresponding label.

Place the icons before label in order for users to see them first.

Add EOS-icons icon inside any style of button to create a button with an icon.

content_copy
<button class='btn btn-secondary'>
  <i class='eos-icons eos-18'>autorenew</i> Button
</button>
<button class='btn btn-primary'>
  <i class='eos-icons eos-18'>autorenew</i> Button
</button>
<button class='btn btn-outline-primary'>
  <i class='eos-icons eos-18'>autorenew</i> Button
</button>
<button class='btn btn-danger'>
  <i class='eos-icons eos-18'>autorenew</i> Button
</button>

Only icon buttons

If an icon button doesn't come with a label, use a tooltip to offer some short explanation of the button's purpose.

You can create an icon-only button, by adding an EOS icon inside any style of button without a text label.

content_copy
<button class='btn btn-secondary' data-toggle='tooltip' title='Add'>
  <i class='eos-icons eos-18'>add</i>
</button>
<button class='btn btn-primary' data-toggle='tooltip' title='Edit'>
  <i class='eos-icons eos-18'>create</i>
</button>
<button class='btn btn-outline-primary' data-toggle='tooltip' title='Refresh'>
  <i class='eos-icons eos-18'>autorenew</i>
</button>
<button class='btn btn-danger' data-toggle='tooltip' title='Delete'>
  <i class='eos-icons eos-18'>delete</i>
</button>