Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Icons

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

Previous version of icon font
  • Overview
  • Specs
  • Guidelines

Overview

Icons serve as visual metaphors, representing actions, objects, or concepts in a simplified and universally recognizable way. They help users quickly understand the purpose or function of various elements within an interface, such as buttons, menus, or controls.

By leveraging familiar shapes and symbols, icons reduce cognitive load and make it easier for users to navigate complex interfaces. For example, a magnifying glass icon usually represents search functionality, while a gear icon is often associated with settings or preferences.

Beaterial is an iconic composition that establishes consistency and harmony in our products’ interface. While the Beat alludes to Compose Design’s rhythm and harmony, the Terial represents Google’s icon font, which is Cegid’s official icon font.

Icons
Icons

Last Update

font-system-Old version
Previous version of the icon font
Current version of icon font
Current version of the icon font
  • Added checklist, event_list, check_box_outline_blank icons.

Related

button-icon

Button Icons

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

Accent Icons

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

List

List of all available icons with their names and unicodes.

Use the search to find the icon you’re looking for. By right-clicking on the icon, you can download it as an svg.

CategoryimageNameUnicode
Stateblocke94a
Stateerror_circlee933
Stateinfo_circlee992
Statecheck_circlee979
Stateinfoe697
Statehelp_circlee98f
Stateerrore763
Statehelpe765
Socialpersone95e
Socialassignment_inde9d3
Socialdomain_logoe97b
Sociallayers_circlee90c
Socialinstagrame986
Socialfacebooke987
Socialvimeoe98a
Sociallinkedine98b
Socialyoutubee98c
Socialtiktoke98d
Socialgroupe74e
Socialshare_squaree75a2
Socialsocial_leaderboarde75b
Socialaccount_boxe741
Socialhandshakee750
Socialcontact_maile745
Socialgroupse74f
Socialgoogle_pluse74d
Socialdropboxe749
Socialexcele74a
Socialmape756
Socialrecent_actorse759
Sociallocal_floriste755
Socialaccount_circlee742
Socialdiamonde7462
Socialbloge744
Socialxe75f
Socialdrivee748
Socialpaypale757
Socialgooglee74c
Socialverified_usere75d
Socialcardiologye906
Socialcampaigne90d
Socialgroup_adde9ec
Placesdomaine90e
Placesdomain_confige968
Placeslocation_on31
Placesglobee9be
Placesdomain_checke9a2
Placesdomain_deletee9a3
Placesdomain_fwde73a
Placesdomain_persone73b
Placeslocation_citye73e
Placesstoree740
Placesfactorye73c
Navigationfit_pagee9e9
Navigationfit_widthe9ea
Navigationfit_heighte9e8
Navigationview_real_sizee9eb
Navigationexpande909
Navigationcollapsee90a
Navigationupgradee94b
Navigationdowngradee949
Navigationsubdirectory_arrow_righte97c
Navigationundoe9c7
Navigationredoe9c3
Navigationarrows_verticale657
Navigationarrows_horizontale658
Navigationarrow_circle_righte65d
Navigationshrinke904
Navigationfullscreene903
Navigationarrow_circle_downe9c1
Navigationstep_backwarde9ad
Navigationfast_rewinde9ac
Navigationfast_forwarde9b8
Navigationstep_forwarde9b9
Navigationlogoute9b7
Navigationchevron_righte649
Navigationchevron_lefte64a
Navigationexpand_lesse648
Navigationexpand_moree64b
Navigationfirst_pagee901
Navigationlast_pagee9cd
Navigationclosee646
Navigationcancele989
Navigationmore_verticale993
Navigationmore_horizontale6e2
Navigationarrow_drop_upe9c8
Navigationarrow_drop_downe9b3
Navigationhomee985
Navigationstope72e
Navigationangle_righte6ff
Navigationangle_lefte6fe
Navigationangle_downe6fd
Navigationangle_upe700
Navigationzoom_oute734
Navigationzoom_ine733
Navigationpadding_lefte728
Navigationpadding_tope729
Navigationdisabled_by_defaulte713
Navigationmergee723
Navigationarrow_forward_adde706
Navigationkeyboard_double_arrow_downe71e
Navigationkeyboard_double_arrow_upe71f
Navigationarrow_righte70e
Navigationarrow_lefte707
Navigationunfold_moree731
Navigationads_clicke6fc
Navigationassistant_navigatione70d
Navigationinpute71d
Navigationoutpute727
Navigationarrow_up_multiplee70a
Navigationarrow_down_multiplee703
Navigationlogine721
Navigationopen_withe726
Navigationzoom_out_mape735
Navigationarrow_selector_toole709
Navigationsorte91c
Navigationselecte91e
Navigationsort_by_alphae962
Mediahide_imagee93f
Mediaimagee9bb
Mediaphoto_librarye6fa
Mediapausee6f9
Mediaplay_circlee6fb
Mediacirclee960
Mediacollections_bookmarke959
Mediacomparee95a
Mediaicon-ueaab-gif_boxgif_boxe9e4
Mediaicon-gif_2gif_2e9e3
Mediaicon-picture_as_pdfpicture_as_pdfe95c
Hardwareicon-equipmentequipment32
Hardwaredvre9d2
Hardwaretools33
Hardwareworke965
Hardwaresparklese6f4
Hardwarerobot_2e6f3
Hardwareprecision_manufacturinge6f1
Hardwarephone_iphonee6f0
Hardwarehard_drivee6ee
Hardwaredesign_servicese6ea
Hardwareqr_code_scannere6f2
Hardwaremotion_photos_autoe6ef
Hardwareextensione9d4
Hardwarebuilde6e9
Filetwo_pagere9e7
Filearticlee9e6
Fileivae931
Filerequest_quotee94f
Filecredit_debte951
Fileedit_documente96a
Fileprocess_changee972
Filetaske977
Fileofficial_reportse970
Fileregistere95d
Filegete6db
Filescan_deletee9a8
Filedescriptione90b
Filefile_processinge905
Fileapprovalse99a
Filefile_zipe6da
Filefile_searche6d9
Filedocument_chartse6d1
Filexlse6e8
Filepdfe6de
Filedocument_pe6d4
Filedocument_ae6cf
Filedocument_expensee6d2
Filefile_copye948
Filesticky_note_2e6e5
Filetext_snippete6e7
Filedrafte6d5
Filereceipte6e0
Filescane6e3
Filedocument_backe6d0
Filedocument_fwde6d3
Filedocument_scannere954
Fileupload_filee957
Fileicon-uea99-atate9cf
Fileicon-uea9a-sssse9e0
Fileicon-uea9c-quick_referencequick_referencee9de
Fileicon-uea9d-contractcontracte9d1
Fileicon-uea9e-file_openfile_opene9d9
Fileicon-uea9f-file_exportfile_exporte9d7
Fileicon-ueaa1-file_savefile_savee9c5
Fileicon-uea79-insert_page_breakinsert_page_breake9db
Fileicon-uea73-planned_file
planned_filee9dd
Fileicon-ueaa2-content_copycontent_copye9d0
Fileicon-ueaad-imgimge9da
Fileicon-ueaae-xmlxmle9e2
Fileicon-ueaaf-docdoce9d6
Fileicon-ueaa3-file_jsonfile_jsone9d8
Filequickguidee997
Contentmatch_worde9e5
Contenthighlight_alle9e1
Contentcatalog_itemse940
Contentcatalog_pube942
Contentcataloge94d
Contentfoldere907
Contentlist_alte939
Contentcardse936
Contentinformatione911
Contentliste937
Contentalign_righte6c1
Contentalign_lefte6c2
Contentjustifye6c3
Contentalign_centere6c4
Contentbolde9ae
Contentitalice696
Contentunderlinee66c
Contentstrikethroughe9c4
Contentlinke62d
Contentopen_in_newe97f
Contentincrease_indente9bc
Contentdecrease_indente9b2
Contentasteriske9ab
Contenttrending_upe9a1
Contenttrending_downe99d
Contentarrow_upwarde9a0
Contentarrow_forwarde99f
Contentarrow_backwarde99e
Contentarrow_downwarde99c
Contentcontent_pastee6b4
Contenttable_optionse984
Contentaccount_treee983
Contentmenue68e
Contentlayout_gride708
Contentlayerse630
Contenthierarchye9bd
Contenthelp_centere9a7
Contentad_efaturae9cb
Contentefaturae9cc
Contentlightbulbe6e4
Contentsignal_celular_alte6e6
Contentfolder_opene6a7
Contentunlinke6ca
Contentflage6a4
Contentcreate_new_foldere69a
Contentfonte6a8
Contenttolle6c6
Contentexpand_circle_lefte6a1
Contentexpand_circle_righte6a2
Contentweb_assete6cb
Contentdocs_add_one69c
Contentdocs_add_on_upe69d
Contentlive_helpe6b9
Contentaeate689
Contentdonut_smalle69f
Contentdonut_largee69e
Contentleaderboard23423
Contentshow_charte6e1
Contentbar_chart_4_barse692
Contentchart_movee698
Contentpending_actionse6bd
Contentmultiplee6bb
Contentplane_ultimatee6c0
Contentplane_basice6be
Contentplane_proe6bf
Contentizettlee6af
Contentlisae6b6
Contenttable_viewe6c5
Contenthdr_autoe6a9
Contentfeatured_play_liste6a3
Contentfolder_cancele6a6
Content123e918
Contenticon-ueaa4-folder_limitedfolder_limitede98e
Contenticon-ueaa5-folder_managedfolder_managede990
Contenticon-ueaa6-folder_checkfolder_checke976
Contentueaa7-folder_check_2folder_check_2e97a
Contenticon-ueaa8-folder_matchfolder_matche994
Contenticon-ueaa9-bookmark_managerbookmark_managere975
Contenticon-ueaaa-folder_codefolder_codee988
Contenticon-uea8a-straightenstraightene995
Contenticon-pulsecegid_pulsee9dc
Contenticon-tagtage950
Contenticon-folder_special
folder_speciale947
Contenticon-folder_sharedfolder_sharede945
Contenticon-topictopice952
Contenticon-drive_file_movedrive_file_movee938
Contenticon-drive_folder_uploaddrive_folder_uploade93d
Contenticon-rule_folderrule_foldere94e
Contenticon-folder_zipfolder_zipe94c
Contenticon-folder_copyfolder_copye941
Contenticon-folder_deletefolder_deletee943
Contentmatch_casee91a
Applicationsdashboarde92b
Applicationsbusiness_centere919
Applicationsshopping_carte91b
Applicationsaccount_balance_wallete927
Applicationsstocke921
Applicationstaxese923
Applicationsoffice_managemente95b
Applicationsmenu_booke91d
Applicationsaccount_balancee91f
Applicationscalendar_clocke92f
Applicationsevente978
Applicationsforume643
Applicationsappse913
Applicationscurrency_exchangee974
Applicationsdraftse92d
Applicationsaccountinge917
Applicationssupport_agente912
Applicationscalendar_monthe93e
Applicationschate956
Applicationsalertse910
Applicationsenergye9b5
Applicationsintegratione96e
Applicationsattach_filee647
Applicationshistorye900
Applicationsdatabasee999
Applicationsshopping_bage9a6
Applicationslightninge9af
Applicationslearne9b0
Applicationschart_pointse9b4
Applicationsarchivee9c9
Applicationssende67e
Applicationssharee67f
Applicationscalle663
Applicationsfaxe66f
Applicationsaccount_transfere659
Applicationsstar_resete6822
Applicationssavingse67d
Applicationscircle_alertse667
Applicationscredit_carde668
Applicationspaymentse67b
Applicationsbalancee65f
Applicationsmoneye677
Applicationsattach_moneye68c
Applicationsmoney_offe678
Applicationspackagee67a
Applicationsstylus_notee684
Applicationschat_paste_goe666
Applicationsmark_unread_chat_alte675
Applicationsrequisitionse9f0
Applicationscurrencye908
Actionsrotate_lefte9df
Actionsvisibility_outlinee916
Actionsvisibility_fille915
Actionssettingse929
Actionsdimensionse93c
Actionsassetse958
Actionsmonitoringe925
Actionsorderse946
Actionsvisibility_offe963
Actionsreturnse944
Actionstunee961
Actionsexplorationse96c
Actionsdeliveriese953
Actionssupplierse95f
Actionsdeletee93a
Actionsremovee636
Actionsadde935
Actionsadd_circlee90f
Actionsadd_boxe9c2
Actionsremove_boxe9c0
Actionsdo_not_disturb_one991
Actionsequale9b6
Actionsequal_circlee9ba
Actionsprocesse955
Actionsroute34
Actionsdownloade981
Actionsuploade982
Actionscloud_downloade6b3
Actionscloud_uploade6b2
Actionsimporte9a4
Actionsexporte9a5
Actionscachede980
Actionspush_pin_fille97d
Actionspush_pin_outlinee97e
Actionsunpine902
Actionsloade9bf
Actionschangee914
Actionscrope9b1
Actionsshortcute99b
Actionssearche610
Actionssavee746
Actionsrestart_alte998
Actionsprinte681
Actionsedite61c
Actionscamerae64e
Actionsstar_outlinee60a
Actionsstar_fille9ca
Actionscheck_boxe64d
Actionsfilter_alte93b
Actionspower_offe682
Actionserasere6a5
Actionsdrage996
Actionsmaile75a
Actionsschedulee66e
Actionsworkspace_premiume9a9
Actionslocke9aa
Actionsdividee9c6
Actionsformulae9ce
Actionsthumb_upe645
Actionsthumb_downe64f
Actionsprint_directe633
Actionssync_alte640
Actionsunsync_alte650
Actionscloude60c
Actionsshoppingmodee9d5
Actionsunlocke502
Actionskeye628
Actionsmove_to_inboxe627
Actionsscissorse63d
Actionsfilter_alt_offe621
Actionsfilter_closee622
Actionsfilter_adde61f
Actionsfilter_expand_lesse623
Actionsfilter_expand_moree624
Actionsbrushe606
Actionsstar_offe644
Actionscloud_donee60d
Actionscloud_fwde60f
Actionssynce6471
Actionsbookmark_outlinee605
Actionsbookmark_fille604
Actionsmark_email_reade62f
Actionsmark_email_unreade62e
Actionssync_disablede641
Actionssync_locke501
Actionslock_resete62b
Actionsspeede642
Actionschecke64c
Actionsdelete_forevere924
Actionslabele928
Actionsrestore_from_trashe92e
Actionsoutboxe92c
Actionsrestore_pagee930
Actionsauto_deletee920
Actionsdelete_sweepe926
Actionsdata_objecte922
Actionsmanage_searche92a
Actionsinboxe932
Actionsunarchivee934
Actionsicon-uea90-apiapie964
Actionstemporary_layerstemporary_layerse973
Actionsicon-uea93-progress_activityprogress_activitye96b
Actionsicon-change_circlechange_circlee966
Actionsicon-uea95-rotate_rightrotate_righte96d
Actionsicon-rule_settingsrule_settingse971
Actionsicon-uea97-rulerulee96f
Actionsicon-filter_appliedfilter_appliede967
Actionsicon-forward_to_inboxforward_to_inboxe969
Actionsicon-checklistcheckliste9ed
Actionsicon-check_box_outline_blankcheck_box_outline_blanke9ef
Actionsicon-event_listevent_liste9ee

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

Clarity

Clear icons are instantly recognizable, making it easier for users to understand their meaning without needing to read accompanying text. This enhances user experience by reducing cognitive load and speeding up interaction.

Consistency

Consistent icons create a predictable user experience. When users encounter familiar icons across different interfaces or applications, they can rely on their prior knowledge to understand the function or action associated with each icon. This reduces cognitive load and makes navigation more intuitive.

Icon Layout

Icon Baseline & Sizes

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 our design system, the available sizes are:

IconSize
add_circle12px
add_circle16px
add_circle20px
add_circle24px (baseline)
add_circle28px
add_circle32px
add_circle40px
add_circle48px
add_circle56px

Icon grid and keyline

An icon grid and keyline are important aspects of icon design, particularly in digital and graphic design contexts. They help maintain consistency, alignment, and scalability within icon sets.

An icon grid is a structural framework used to organize and align icons within a design system. It consists of evenly spaced horizontal and vertical lines that define the boundaries and positioning of individual icons.

Keylines are typically used to ensure that icons maintain a consistent visual weight and shape across different sizes and resolutions. They help designers maintain clarity and readability, especially when icons are scaled down or displayed on lower-resolution screens.


Case Studies

Release v1.3

The latest release of Compose Design focuses on continuous updates to our components and patterns, as well as several improvements …

Release v1.2

Compose Design v1.2 introduces key updates to enhance clarity, consistency, and usability across the system, ensuring a more structured and …

Driving to a new destination without GPS?

Having help systems/guides that explain the actions within the product can help demystify doubts and increase form adoption …

Outline