Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Button Icons

Button Icons are used for minor actions that can be resumed within one icon.

button-icon
  • Overview
  • Specs
  • Guidelines
  • Mobile

Component

Button icons are used to be displayed within compact layouts, where the desired action can be resumed in one icon and unambiguously.

Button icons can be represented with the colors theme, grey and error. Alongside it can be combined with the variations primary, secondary, tertiary and text button. This component follows the same color states as the buttons.

Button icon anatomy

A: Primary variation

B: Secondary variation

C: Tertiary variation

D: Text Button variation

1: Icon

Button_Icon_EX1
Buttons icons inside action bar

Used for:

Action bar options

Used to provide quick access to frequent actions, such as print and attach;

Sorting and filtering

Enable users to sort and group by columns inside the data-grid pattern;

Messaging actions

Used to represent a send button without taking to much place;

File management

Complete the process of uploading files or media, either for accepting or canceling the media attached;

Don’t use for:

Insufficient visual cues

It’s not recommended to use button icons when the meaning of the icons is not immediately clear or intuitive;

Accessibility concerns

Do not use button icons to display primary information such as “Save”, in order to maintain the base functionality for persons using a screen reader. Consider using buttons instead;

Overreliance on icons

Avoid overreliance on button icons for critical actions, especially when users may be unfamiliar with the meaning of the icons;

Inconsistent iconography

If the iconography used in button icons is inconsistent or lacks standardization across the interface, users may struggle to interpret their meaning consistently;

Create button icon applied as primary action

Demo

Access the Figma file and inspect element using Dev Mode.

Button icon properties

Last Update

Image showing the desktop version of the Button Icon.
Desktop version of the Button Icon
Image showing the mobile version of the Button Icon.
Mobile version of the Button Icon
  • Added new tab for the mobile version of the component.

Related

Previous version of icon font

Icons

Icons are visual metaphors used to represent objects, actions or ideas …

Color

Colors infuse life and dynamism into interfaces, expressing emotions and setting the tone for communication …
Button skeleton image

Buttons

Buttons are used to perform an action. Their labels tell the user what will happen when they interact with them …
action-bar

Action Bar

An Action Bar is a UI element at the top of interfaces, which offers quick access to essential actions relevant …

States

Button icon states

Primary

Enabled
.enabled {
background-color: var(--Theme-100);
color: var(--grey-1);
}
Hover
.hover {
background-color: var(--Theme-80);
color: var(--grey-1);
}
Pressed
.pressed {
background-color: var(--Theme-highlight);
color: var(--grey-1);
}
Loading
.loading {
background-color: var(--Theme-100);
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}
Disabled
.disabled {
background-color: var(--Grey-4);
color: var(--grey-6);
}
Focus
.focus {
background-color: var(--Theme-80);
border-color: var(--Theme-highlight);
color: var(--grey-1);
}

Secondary

Enabled
.enabled {
background-color: var(--Theme-20);
color: var(--Theme-100);
}
Hover
.hover {
background-color: var(--Theme-40);
color: var(--Theme-highlight);
}
Pressed
.pressed {
background-color: var(--Theme-20);
border-color: var(--Theme-80);
color: var(--Theme-100);
}
Loading
.loading {
background-color: var(--Theme-20);
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}
Disabled
.disabled {
background-color: var(--Grey-4);
color: var(--Grey-6);
}
Focus
.focus {
background-color: var(--Theme-20);
border-color: var(--Theme-highlight);
color: var(--Theme-100);
}

Tertiary

Enabled
.enabled {
background-color: var(--Grey-1);
border-color: var(--Grey-5);
color: var(--Theme-100);
}
Hover
.hover {
background-color: var(--Theme-10);
border-color: var(--Grey-5);
color: var(--Theme-100);
}
Pressed
.pressed {
background-color: var(--Theme-20);
border-color: var(--Grey-5);
color: var(--Theme-100);
}
Loading
.loading {
background-color: var(--Grey-1);
border-color: var(--Grey-5);
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}
Disabled
.disabled {
background-color: var(--Grey-2);
border-color: var(--Grey-4);
color: var(--Grey-6);
}
Focus
.focus {
background-color: var(--Grey-1);
border-color: var(--Theme-highlight);
color: var(--Theme-100);
}

Text Button

Enabled
.enabled {
color: var(--Theme-100);
}
Hover
.hover {
background-color: var(--Theme-10);
color: var(--Theme-100);
}
Pressed
.pressed {
background-color: var(--Theme-20);
color: var(--Theme-100);
}
Loading
.loading {
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}
Disabled
.disabled {
color: var(--Grey-6);
}
Focus
.focus {
border-color: var(--Theme-highlight);
color: var(--Theme-100);
}

Variations

Colors

Theme
Theme enabled variations
.primary-enabled { background-color: var(--Theme-100); color: var(--dgrey-1); }
.secondary-enabled { background-color: var(--Theme-20); color: var(--Theme-100); }
.tertiary-enabled { background-color: var(--Grey-1); border-color: var(--Grey-5); color: var(--Theme-100); }
.text_button-enabled { color: var(--Theme-100); }

Error
Error enabled variations
.primary-enabled { background-color: var(--Error-100); color: var(--grey-1); }
.secondary-enabled { background-color: var(--Error-20); color: var(--Error-100); }
.tertiary-enabled { background-color: var(--Grey-1); border-color: var(--Grey-5); color: var(--Error-100); }
.text_button-enabled { color: var(--Error-100); }

Grey
Grey enabled variations
.primary-enabled { background-color: var(--Grey-9); color: var(--grey-1); }
.secondary-enabled { background-color: var(--Grey-2); color: var(--Grey-9); }
.tertiary-enabled { background-color: var(--Grey-1); border-color: var(--Grey-5); color: var(--Grey-8); }
.text_button-enabled { color: var(--Grey-8); }

Size

Small
.small {
  padding: var(--spacing-6) var(--spacing-6);
  border-radius: var(--x-small-radius);
  icon: icon: 16px;
}
Regular
.regular {
  padding: var(--spacing-8) var(--spacing-8);
  border-radius: var(--x-small-radius);
  icon: icon: 20px;
}
Large
.large {
  padding: var(--spacing-8) var(--spacing-8);
  border-radius: var(--x-small-radius);
  icon: icon: 24px;
  }

Useful links

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

polygon-framework

This component is or will be provided by the Polygon framework. See its documentation to learn more.

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Behavior

Fixed Size

Button icons, by nature, must always have a fixed size, because the button only allows us to show one icon and this must be proportional in all scenarios. The height follows the button component so that it can be paired with action bars, for example. This component follows the same color states as the buttons.

Fixed sizes

Don’t use different sizes in the same set.

Hierarchy

Button icons hierarchy follows the same rules documented in the article on buttons.

Use different button hierarchies and in the following order: tertiary, secondary, primary.

Combine theme colors with grey.

Use secondary buttons of the same color together.


Case Studies

Accessible Web for Everyone

Declaração de Acessibilidade do Compose Design

O Compose Design é gerido pela equipa Experience Architecture da Cegid e foi desenvolvido para ser utilizado pelo maior número …
Why Web Accessibility Matters - And How to Start

Why Web Accessibility Matters – And How to Start

Web accessibility is about designing inclusive digital experiences that benefit everyone, guided by four key principles and driven by the …
Writing for Everyone

Writing for Everyone: Every Word Counts in Accessibility

Writing for everyone is an essential part of any digital product. It can and does make a big difference to …

What Changes?

Mobile Button Icons look and behave very similarly to their desktop counterpart, with only a few slight changes to their appearance.

Demo

Access the Figma file and inspect element using Dev Mode.

Button Icon in Figma

Size

All variations had their size increased in order to improve visibility on small screens. Additionally, smaller variations have been placed in a container that helps ensure that their touch target is at least 44×44 px, regardless of where they are used.

Small desktop and mobile buttons comparison
Small desktop and mobile Button Icons, respectively

Position

Button Icons are one of the most universal components in any design system, meaning their positions may vary significantly.

On desktop interfaces, they’re often placed in areas with great visibility, such as the center or the top. However, smartphone users may struggle to reach those areas on their devices without straining their thumbs.

When implementing important actions that users will need to access frequently, be sure to keep in mind ease of access, and not just visibility or aesthetics.

Map showing users' thumb range
Map showing users’ thumb range

States

For the most part, variations are kept the same. However, the lack of a cursor means the hover and focus states aren’t used.

Enabled, Disabled, Pressed and Loading states, respectively
Button Icon with a tooltip explaining what it's for

Use Button Icons if the action they’re representing isn’t clear, as you cannot rely on tooltips in mobile interfaces.


Case Studies

Accessible Web for Everyone

Declaração de Acessibilidade do Compose Design

O Compose Design é gerido pela equipa Experience Architecture da Cegid e foi desenvolvido para ser utilizado pelo maior número …
Why Web Accessibility Matters - And How to Start

Why Web Accessibility Matters – And How to Start

Web accessibility is about designing inclusive digital experiences that benefit everyone, guided by four key principles and driven by the …
Writing for Everyone

Writing for Everyone: Every Word Counts in Accessibility

Writing for everyone is an essential part of any digital product. It can and does make a big difference to …

Outline