Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Accent Icons

Accent Icons in UX serve as graphical representations of concepts, actions, or objects, enhancing user understanding and interaction within digital interfaces.

  • Overview
  • Specs
  • Guidelines

Overview

Accent icons are graphical elements used in user interface design to draw attention to specific actions, features, or information within a digital interface. They typically feature distinctive visual characteristics such as color, size, or styling to differentiate them from other icons and elements, helping users quickly identify and interact with important components.

These icons serve as focal points that guide user attention, highlight key functionalities, and enhance overall usability and engagement within the interface. In our use case, the accent icons serve to represent empty states.

accent_icon_demo
Accent Icons

View all available accent icons at Specs tab.

Last Update

Previous version of the Accent Icons
Previous version of the Accent Icons
accent-icons-new-versions
Current version of the Accent Icons
  • Added ‘button_alt’;
  • Added ‘post_add’;

Related

Previous version of icon font

Icons

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

Library

ShapedTransparentName
Accent Icon Shaped Account AddAccent Icon Transp Account AddAccount Add
Accent Icon Shaped Account BalanceAccent Icon Transparent Account BalanceAccount Balance
Accent Icon Shaped Account BoxAccent Icon Transparent Account BoxAccount Box
Accent Icon Shaped AttributesAccent Icon Transparent AttributesAttributes
Accent Icon Shaped Bar ChartAccent Icon Transparent Bar ChartBar Chart
Accent Icon Shaped Beach-accessAccent Icon Transparent Beach-accessBeach-access
Accent Icon Shaped Business CenterAccent Icon Transparent Business CenterBusiness Center
Accent Icon Shaped ClassAccent Icon Transparent ClassClass
Accent Icon Shaped DashboardAccent Icon Transparent DashboardDashboard
Accent Icon Shaped DeleteAccent Icon Transparent DeleteDelete
Accent Icon Shaped DictionaryAccent Icon Transparent DictionaryDictionary
Accent Icon Shaped Edit NoteAccent Icon Transparent Edit NoteEdit Note
Accent Icon Shaped ErrorAccent Icon Transparent ErrorError
Accent Icon Shaped ForestAccent Icon Transparent ForestForest
Accent Icon Shaped Forward to InboxAccent Icon Transparent Forward to InboxForward to Inbox
Accent Icon Shaped GraphicsAccent Icon Transparent GraphicsGraphics
Accent Icon Shaped GuidelineAccent Icon Transparent GuidelineGuideline
Accent Icon Shaped HourglassAccent Icon Transparent HourglassHourglass
Accent Icon Shaped InventoryAccent Icon Transparent InvoiceInventory
Accent Icon Shaped InvoiceAccent Icon Transparent InvoiceInvoice
Accent Icon Shaped LayersAccent Icon Transparent LayersLayers
Accent Icon Shaped List CheckAccent Icon Transparent List CheckList Check
Accent Icon Shaped ListAccent Icon Transparent ListList
Accent Icon Shaped LockAccent Icon Transparent LockLock
Accent Icon Shaped Login ErrorAccent Icon=Login Error TransparentLogin Error
Accent Icon Shaped Login SuccessAccent Icon Transparent Login SuccessLogin Success
Accent Icon Shaped LogoutAccent Icon Transparent LogoutLogout
Accent Icon=Mail Error ShapedAccent Icon=Mail Error TransparentMail Error
Accent Icon=Mail Lock ShapedAccent Icon=Mail Lock TransparentMail Lock
Accent Icon=Maintenance ShapedAccent Icon=Maintenance TransparentMaintenance
Accent Icon=Mark Mail Read ShapedAccent Icon=Mark Mail Read TransparentMark Mail Read
Accent Icon=Match Word ShapedAccent Icon=Match Word TransparentMatch Word
Accent Icon=Message Info ShapedAccent Icon=Message Info TransparentMessage Info
Accent Icon=Message Success ShapedAccent Icon=Message Success TransparentMessage Success
Accent Icon=Miscellaneous ShapedAccent Icon=Miscellaneous TransparentMiscellaneous
Accent Icon=Network ShapedAccent Icon=Network TransparentNetwork
Accent Icon=Notifications ShapedAccent Icon=Notifications TransparentNotifications
Accent Icon=Packages ShapedAccent Icon=Packages TransparentPackages
Accent Icon=Phone Lock ShapedAccent Icon=Phone Lock TransparentPhone Lock
Accent Icon=Preview ShapedAccent Icon=Preview TransparentPreview
Accent Icon=Printing Settings ShapedAccent Icon=Printing Settings TransparentPrinting Setting
Accent Icon=Printing ShapedAccent Icon=Printing TransparentPrinting
Accent Icon=Security ShapedAccent Icon=Security TransparentSecurity
Accent Icon=Settings ShapedAccent Icon=Settings TransparentSettings
Accent Icon=Spa ShapedAccent Icon=Spa TransparentSpa
Accent Icon=Success ShapedAccent Icon=Success TransparentSuccess
Accent Icon=Sync ShapedAccent Icon=Sync TransparentSync
Accent Icon=Table ShapedAccent Icon=Table TransparentTable
Accent Icon=Task Alt ShapedAccent Icon=Task Alt TransparentTask Alt
Accent Icon=Unknown Document ShapedAccent Icon=Unknown Document TransparentUnknown Document
Accent Icon=Verified User ShapedAccent Icon=Verified User TransparentVerified User
Accent Icon=Warning ShapedAccent Icon=Warning TransparentWarning
Accent Icon=Weather-hail ShapedAccent Icon=Weather-hail TransparentWeather-hail
Accent-IconButton_Alt-shapedAccent-IconButton_Alt-transparentButton_alt
Accent-Icon-Post_Add-shapedAccent-Icon-Post_Add-transparentPost_add
Description
Create_New_Folder
Folder_Copy
Power_Off
Bookmark_Manager

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.

Design principles

Size & Shape

The base size of the Accent icons is 144x144px, having an additional 18px padding to the background shape, which has a base size of 108x108px.

The background shape can be either visible or not, depending on the applied color. In Grey-1 (#FEFEFE) backgrounds, the background shape is visible, on the other hand on Grey-3 (#F3F7FE) backgrounds, the background shape is not visible, only the accent icon on itself.

Icon Layout

Icon Baseline

An icon baseline, in the context of design, refers to a horizontal guideline or imaginary line that defines the bottom alignment of icons within a set. It establishes a consistent visual reference point for the bottom edge of icons, ensuring that they appear aligned when displayed together.

In the Accent Icons, the icon baseline is 72px, to maintain the ratio between all accent icons.


Case Studies

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 …

Release v1.4

Overview Compose Design has recently undergone some important updates, which means it’s time for another release note. In addition to …

Understanding the Disabled State

The disabled state indicates that a UI element is not interactive. When used correctly, it prevents users from making common …

Outline