Ícones
A iconografia é um conjunto de imagens e símbolos visuais que ajudam os usuários a entender e navegar pela aplicação. No CPS Design System, ícones são fortemente recomendados para utilização ao longo de toda a interface, como sendo metáforas visuais que representam um conceito, uma ação ou uma situação.
Dicas
Há quem fale brincando (ou até pejorativamente de propósito) que ícone é só "firula" para "enfeitar" interfaces. Ledo engano, já que criar metáforas visuais é uma das maneiras mais eficientes de reduzir sobrecarga cognitiva.
De quebra, duas das 10 Heurísticas de Jakob Nielsen são atendidas: "oferecer uma clara ponte entre o software e o mundo real" e "proporcionar rápido reconhecimento através da familiaridade".
Antes discutir a tipografia deste design system, é importante delimitar adequadamente seu escopo.
Ícones de Aplicação
Os ícones de aplicação representam uma imagem exclusiva e imediatamente reconhecível que ajuda a identificar a aplicação, em meio a outras, idealmente uma imagem que represente a identidade da aplicação, ou que remeta à sua funcionalidade principal por meio de uma metáfora. Ícones de aplicação envolvem o uso de cores de marca, efeitos visuais, sombras, dentre outras características de identificação única.
No contexto da web, também são usados principalmente para reconhecer e iniciar sua aplicação a partir de atalhos, como em uma app drawer compartilhada entre vários sistemas, e também para identificar a aplicação onde quer que ele apareça no navegador, como na barra de títulos, na lista de favoritos, no histórico de navegação, etc.
Atenção
Para máxima compatibilidade em diferentes dispositivos e plataformas, aplicações web modernas devem conter vários assets de ícones, em formatos e tamanhos variados, bem como arquivos de manifesto e importações corretamente realizadas nas páginas web, para que sejam apresentados conforme esperado em cada cenário. Uma ferramenta como Real Favicon Generator pode ser de grande auxílio.
Em algumas situações, ícones de aplicação são simplesmente derivações de marcas já existentes, como é o caso do favicon utilizado nos portais do CPS, diretamente derivado de seu logotipo descrito no Manual de Identidade Visual.
Para todos os outros casos, incluindo cada sistema interno que aderir a este design system, recomenda-se fortemente que um ícone de aplicação seja construído por um designer, seguindo boas práticas de elaboração de ícones de aplicações (ou ao menos seguindo-se bons materiais sobre o assunto, como How to Design a Great App Icon: What You Need to Know e 5 Tips for Designing the Perfect Mobile App Icon).
Ícones de Sistema
Ícones de sistema, por sua vez, são os símbolos visuais que efetivamente ajudam usuários a navegar pela aplicação, remetendo a objetos e ações do mundo real, criando metáforas visuais e facilitando o processo cognitivo de reconhecer o significado das coisas em uma interface.
O CPS Design System segue, na iconografia, a mesma influência que norteou sua construção. Assim, recomenda-se o uso da biblioteca de ícones Fluent UI System Icons da Microsoft, uma coleção livre sob licença MIT, com mais de 4 mil ícones cuidadosamente construídos usando as mesmas características geométricas do restante da interface Fluent, através de três princípios estéticos:
- Mínimo: Contêm apenas os mínimos traços necessários para comunicar o conceito.
- Harmonioso: Se baseiam em formatos simples e geométricos.
- Evoluído: Usam metáforas modernas e facilmente compreendidas.
Esta coleção de ícones é oferecida em duas variações de design: versão regular e versão preenchida.
Versão Regular
A versão regular da biblioteca de ícones Fluent UI System Icons se baseia somente em linhas de demarcação dos glifos, ou seja, traços puros sem preenchimento. Normalmente, em outras bibliotecas de ícones, este visual é chamado de outline.
access_time
accessibility
accessibility_checkmark
add
add_circle
add_square
add_square_multiple
add_subtract_circle
airplane
airplane_take_off
album
album_add
alert
alert_off
alert_on
alert_snooze
alert_urgent
align_bottom
align_center_horizontal
align_center_vertical
align_left
align_right
align_top
animal_cat
animal_dog
animal_rabbit
animal_turtle
app_folder
app_generic
app_recent
app_store
app_title
approvals_app
apps
apps_add_in
apps_list
apps_list_detail
archive
archive_arrow_back
archive_multiple
archive_settings
arrow_autofit_content
arrow_autofit_down
arrow_autofit_height
arrow_autofit_height_dotted
arrow_autofit_up
arrow_autofit_width
arrow_autofit_width_dotted
arrow_between_down
arrow_bidirectional_up_down
arrow_bounce
arrow_circle_down
arrow_circle_down_double
arrow_circle_down_right
arrow_circle_down_split
arrow_circle_up
arrow_clockwise
arrow_clockwise_dashes
arrow_collapse_all
arrow_counterclockwise
arrow_counterclockwise_dashes
arrow_curve_down_left
arrow_down
arrow_down_left
arrow_download
arrow_enter_left
arrow_enter_up
arrow_expand
arrow_export_ltr
arrow_export_rtl
arrow_export_up
arrow_fit
arrow_forward
arrow_forward_down_lightning
arrow_forward_down_person
arrow_hook_down_left
arrow_hook_down_right
arrow_hook_up_left
arrow_hook_up_right
arrow_import
arrow_left
arrow_maximize
arrow_maximize_vertical
arrow_minimize
arrow_minimize_vertical
arrow_move
arrow_next
arrow_previous
arrow_redo
arrow_repeat_all
arrow_repeat_all_off
arrow_reply
arrow_reply_all
arrow_reply_down
arrow_reset
arrow_right
arrow_rotate_clockwise
arrow_rotate_counterclockwise
arrow_routing
arrow_routing_rectangle_multiple
arrow_sort
arrow_sort_down
arrow_sort_down_lines
arrow_sort_up
arrow_split
arrow_square_down
arrow_step_in
arrow_step_in_left
arrow_step_in_right
arrow_step_out
arrow_swap
arrow_sync
arrow_sync_checkmark
arrow_sync_circle
arrow_sync_dismiss
arrow_trending
arrow_trending_checkmark
arrow_trending_down
arrow_trending_lines
arrow_trending_settings
arrow_trending_text
arrow_trending_wrench
arrow_turn_bidirectional_down_right
arrow_turn_right
arrow_undo
arrow_up
arrow_up_left
arrow_up_right
arrow_upload
arrows_bidirectional
attach
attach_arrow_right
attach_text
auto_fit_height
auto_fit_width
autocorrect
autosum
backpack
backpack_add
backspace
badge
balloon
barcode_scanner
battery_0
battery_1
battery_10
battery_2
battery_3
battery_4
battery_5
battery_6
battery_7
battery_8
battery_9
battery_charge
battery_checkmark
battery_saver
battery_warning
beach
beaker
beaker_edit
bed
bezier_curve_square
bin_full
bluetooth
bluetooth_connected
bluetooth_disabled
bluetooth_searching
blur
board
board_heart
board_split
book
book_add
book_arrow_clockwise
book_clock
book_coins
book_compass
book_contacts
book_database
book_exclamation_mark
book_globe
book_information
book_letter
book_number
book_open
book_open_globe
book_open_microphone
book_pulse
book_question_mark
book_question_mark_rtl
book_search
book_star
book_theta
book_toolbox
bookmark
bookmark_add
bookmark_multiple
bookmark_off
bookmark_search
border_all
border_bottom
border_bottom_double
border_bottom_thick
border_left
border_left_right
border_none
border_outside
border_outside_thick
border_right
border_top
border_top_bottom
border_top_bottom_double
border_top_bottom_thick
bot
bot_add
bowl_chopsticks
box
box_arrow_left
box_arrow_up
box_checkmark
box_dismiss
box_edit
box_multiple
box_multiple_arrow_left
box_multiple_arrow_right
box_multiple_checkmark
box_multiple_search
box_search
box_toolbox
braces
braces_variable
brain_circuit
branch
branch_compare
branch_fork
branch_fork_hint
branch_fork_link
breakout_room
briefcase
briefcase_medical
briefcase_off
brightness_high
brightness_low
broad_activity_feed
broom
bug
building
building_bank
building_bank_link
building_bank_toolbox
building_factory
building_government
building_home
building_lighthouse
building_multiple
building_retail
building_retail_money
building_retail_shield
building_retail_toolbox
building_shop
building_skyscraper
calculator
calculator_arrow_clockwise
calculator_multiple
calendar_3_day
calendar_add
calendar_agenda
calendar_arrow_down
calendar_arrow_right
calendar_assistant
calendar_cancel
calendar_chat
calendar_checkmark
calendar_clock
calendar_day
calendar_edit
calendar_empty
calendar_error
calendar_info
calendar_ltr
calendar_mail
calendar_mention
calendar_month
calendar_multiple
calendar_pattern
calendar_person
calendar_phone
calendar_question_mark
calendar_reply
calendar_rtl
calendar_search
calendar_settings
calendar_star
calendar_sync
calendar_today
calendar_toolbox
calendar_week_numbers
calendar_week_start
calendar_work_week
call
call_add
call_checkmark
call_dismiss
call_end
call_forward
call_inbound
call_missed
call_outbound
call_park
call_pause
call_prohibited
call_transfer
calligraphy_pen
camera
camera_add
camera_dome
camera_off
camera_switch
caret_down
caret_down_right
caret_left
caret_right
caret_up
cart
cast
cellular_3g
cellular_4g
cellular_5g
cellular_data_1
cellular_data_2
cellular_data_3
cellular_data_4
cellular_data_5
cellular_off
cellular_warning
center_horizontal
center_vertical
certificate
channel
channel_add
channel_alert
channel_arrow_left
channel_dismiss
channel_share
channel_subtract
chart_multiple
chart_person
chat
chat_bubbles_question
chat_dismiss
chat_help
chat_settings
chat_video
chat_warning
check
checkbox_1
checkbox_2
checkbox_arrow_right
checkbox_checked
checkbox_indeterminate
checkbox_person
checkbox_unchecked
checkbox_warning
checkmark
checkmark_circle
checkmark_lock
checkmark_note
checkmark_square
checkmark_starburst
chevron_circle_down
chevron_circle_left
chevron_circle_right
chevron_circle_up
chevron_double_down
chevron_double_left
chevron_double_right
chevron_double_up
chevron_down
chevron_left
chevron_right
chevron_up
chevron_up_down
circle
circle_edit
circle_half_fill
circle_line
circle_small
city
class
classification
clear_formatting
clipboard
clipboard_arrow_right
clipboard_checkmark
clipboard_clock
clipboard_code
clipboard_data_bar
clipboard_edit
clipboard_error
clipboard_heart
clipboard_image
clipboard_letter
clipboard_link
clipboard_more
clipboard_paste
clipboard_pulse
clipboard_search
clipboard_settings
clipboard_task
clipboard_task_add
clipboard_task_list_ltr
clipboard_task_list_rtl
clipboard_text_ltr
clipboard_text_rtl
clock
clock_alarm
clock_arrow_download
clock_dismiss
clock_pause
clock_toolbox
closed_caption
closed_caption_off
cloud
cloud_archive
cloud_arrow_down
cloud_arrow_up
cloud_checkmark
cloud_dismiss
cloud_edit
cloud_flow
cloud_link
cloud_off
cloud_swap
cloud_sync
cloud_words
code
collections
collections_add
color
color_background
color_background_accent
color_fill
color_fill_accent
color_line
color_line_accent
column
column_edit
column_triple
column_triple_edit
comma
comment
comment_add
comment_arrow_left
comment_arrow_right
comment_checkmark
comment_dismiss
comment_edit
comment_error
comment_lightning
comment_mention
comment_multiple
comment_multiple_checkmark
comment_multiple_link
comment_note
comment_off
communication
communication_person
compass_northwest
component_2_double_tap_swipe_down
component_2_double_tap_swipe_up
compose
conference_room
connector
contact_card
contact_card_group
contact_card_ribbon
content_settings
content_view
content_view_gallery
contract_down_left
control_button
convert_range
cookies
copy
copy_add
copy_arrow_right
copy_select
couch
credit_card_person
credit_card_toolbox
crop
crop_interim
crop_interim_off
cube
cube_multiple
cube_quick
cube_sync
cube_tree
currency_dollar_euro
currency_dollar_rupee
cursor
cursor_click
cursor_hover
cursor_hover_off
cut
dark_theme
data_area
data_bar_horizontal
data_bar_vertical
data_bar_vertical_add
data_funnel
data_histogram
data_line
data_pie
data_scatter
data_sunburst
data_treemap
data_trending
data_usage
data_usage_edit
data_usage_toolbox
data_waterfall
data_whisker
database
database_link
database_person
database_search
decimal_arrow_left
decimal_arrow_right
delete
delete_dismiss
delete_off
dentist
design_ideas
desktop
desktop_arrow_right
desktop_cursor
desktop_edit
desktop_flow
desktop_keyboard
desktop_mac
desktop_pulse
desktop_signal
desktop_speaker
desktop_speaker_off
desktop_sync
desktop_toolbox
developer_board
developer_board_search
device_eq
device_meeting_room
device_meeting_room_remote
diagram
dialpad
dialpad_off
diamond
directions
dismiss
dismiss_circle
dismiss_square
dismiss_square_multiple
diversity
divider_short
divider_tall
dock
dock_row
doctor
document
document_add
document_arrow_left
document_arrow_right
document_briefcase
document_bullet_list
document_bullet_list_clock
document_bullet_list_multiple
document_bullet_list_off
document_catch_up
document_checkmark
document_chevron_double
document_copy
document_css
document_dismiss
document_edit
document_endnote
document_error
document_flowchart
document_footer
document_footer_dismiss
document_header
document_header_arrow_down
document_header_dismiss
document_header_footer
document_heart
document_heart_pulse
document_javascript
document_landscape
document_landscape_data
document_landscape_split
document_landscape_split_hint
document_link
document_lock
document_margins
document_mention
document_multiple
document_multiple_percent
document_multiple_prohibited
document_one_page
document_page_bottom_center
document_page_bottom_left
document_page_bottom_right
document_page_break
document_page_number
document_page_top_center
document_page_top_left
document_page_top_right
document_pdf
document_percent
document_person
document_pill
document_prohibited
document_question_mark
document_queue
document_queue_add
document_queue_multiple
document_ribbon
document_save
document_search
document_settings
document_split_hint
document_split_hint_off
document_sync
document_table
document_table_arrow_right
document_table_checkmark
document_table_cube
document_table_search
document_table_truck
document_text
document_text_clock
document_text_extract
document_text_link
document_text_toolbox
document_toolbox
document_width
Versão Preenchida
A versão preenchida da biblioteca de ícones Fluent UI System Icons, como o nome já indica, possui preenchimento nos glifos, utilizando-se de intersecções vazadas para distinguir diferentes figuras dentro de um mesmo ícone.
access_time
accessibility
accessibility_checkmark
add
add_circle
add_square
add_square_multiple
add_subtract_circle
airplane
airplane_take_off
album
album_add
alert
alert_off
alert_on
alert_snooze
alert_urgent
align_bottom
align_center_horizontal
align_center_vertical
align_left
align_right
align_top
animal_cat
animal_dog
animal_rabbit
animal_turtle
app_folder
app_generic
app_recent
app_store
app_title
approvals_app
apps
apps_add_in
apps_list
apps_list_detail
archive
archive_arrow_back
archive_multiple
archive_settings
arrow_autofit_content
arrow_autofit_down
arrow_autofit_height
arrow_autofit_height_dotted
arrow_autofit_up
arrow_autofit_width
arrow_autofit_width_dotted
arrow_between_down
arrow_bidirectional_up_down
arrow_bounce
arrow_circle_down
arrow_circle_down_double
arrow_circle_down_right
arrow_circle_down_split
arrow_circle_left
arrow_circle_right
arrow_circle_up
arrow_circle_up_left
arrow_clockwise
arrow_clockwise_dashes
arrow_collapse_all
arrow_counterclockwise
arrow_counterclockwise_dashes
arrow_curve_down_left
arrow_curve_down_right
arrow_curve_up_left
arrow_curve_up_right
arrow_down
arrow_down_left
arrow_download
arrow_eject
arrow_enter_left
arrow_enter_up
arrow_expand
arrow_export_ltr
arrow_export_rtl
arrow_export_up
arrow_fit
arrow_forward
arrow_forward_down_lightning
arrow_forward_down_person
arrow_hook_down_left
arrow_hook_down_right
arrow_hook_up_left
arrow_hook_up_right
arrow_import
arrow_left
arrow_maximize
arrow_maximize_vertical
arrow_minimize
arrow_minimize_vertical
arrow_move
arrow_next
arrow_paragraph
arrow_previous
arrow_redo
arrow_repeat_all
arrow_repeat_all_off
arrow_reply
arrow_reply_all
arrow_reply_down
arrow_reset
arrow_right
arrow_rotate_clockwise
arrow_rotate_counterclockwise
arrow_routing
arrow_routing_rectangle_multiple
arrow_sort
arrow_sort_down
arrow_sort_down_lines
arrow_sort_up
arrow_split
arrow_square_down
arrow_step_in
arrow_step_in_left
arrow_step_in_right
arrow_step_out
arrow_step_over
arrow_swap
arrow_sync
arrow_sync_checkmark
arrow_sync_circle
arrow_sync_dismiss
arrow_trending
arrow_trending_checkmark
arrow_trending_down
arrow_trending_lines
arrow_trending_settings
arrow_trending_text
arrow_trending_wrench
arrow_turn_bidirectional_down_right
arrow_turn_right
arrow_undo
arrow_up
arrow_up_left
arrow_up_right
arrow_upload
arrow_wrap
arrow_wrap_off
arrows_bidirectional
attach
attach_arrow_right
attach_text
auto_fit_height
auto_fit_width
autocorrect
autosum
backpack
backpack_add
backspace
badge
balloon
barcode_scanner
battery_0
battery_1
battery_10
battery_2
battery_3
battery_4
battery_5
battery_6
battery_7
battery_8
battery_9
battery_charge
battery_checkmark
battery_saver
battery_warning
beach
beaker
beaker_edit
bed
bezier_curve_square
bin_full
bluetooth
bluetooth_connected
bluetooth_disabled
bluetooth_searching
blur
board
board_heart
board_split
book
book_add
book_arrow_clockwise
book_clock
book_coins
book_compass
book_contacts
book_database
book_exclamation_mark
book_globe
book_information
book_letter
book_number
book_open
book_open_globe
book_open_microphone
book_pulse
book_question_mark
book_question_mark_rtl
book_search
book_star
book_toolbox
bookmark
bookmark_add
bookmark_multiple
bookmark_off
bookmark_search
border_all
border_bottom
border_bottom_double
border_bottom_thick
border_left
border_left_right
border_none
border_outside
border_outside_thick
border_right
border_top
border_top_bottom
border_top_bottom_double
border_top_bottom_thick
bot
bot_add
bowl_chopsticks
box
box_arrow_left
box_arrow_up
box_checkmark
box_dismiss
box_edit
box_multiple
box_multiple_arrow_left
box_multiple_arrow_right
box_multiple_checkmark
box_multiple_search
box_search
box_toolbox
braces
braces_variable
brain_circuit
branch
branch_compare
branch_fork
branch_fork_hint
branch_fork_link
breakout_room
briefcase
briefcase_medical
briefcase_off
brightness_high
brightness_low
broad_activity_feed
broom
bug
building
building_bank
building_bank_link
building_bank_toolbox
building_factory
building_government
building_home
building_multiple
building_retail
building_retail_money
building_retail_shield
building_retail_toolbox
building_shop
building_skyscraper
calculator
calculator_arrow_clockwise
calculator_multiple
calendar_3_day
calendar_add
calendar_agenda
calendar_arrow_down
calendar_arrow_right
calendar_assistant
calendar_cancel
calendar_chat
calendar_checkmark
calendar_clock
calendar_day
calendar_edit
calendar_empty
calendar_error
calendar_info
calendar_ltr
calendar_mail
calendar_mention
calendar_month
calendar_multiple
calendar_pattern
calendar_person
calendar_phone
calendar_question_mark
calendar_reply
calendar_rtl
calendar_search
calendar_settings
calendar_star
calendar_sync
calendar_today
calendar_toolbox
calendar_week_numbers
calendar_week_start
calendar_work_week
call
call_add
call_checkmark
call_dismiss
call_end
call_forward
call_inbound
call_missed
call_outbound
call_park
call_pause
call_prohibited
call_transfer
calligraphy_pen
camera
camera_add
camera_dome
camera_off
camera_switch
caret_down
caret_down_right
caret_left
caret_right
caret_up
cart
cast
cellular_3g
cellular_4g
cellular_5g
cellular_data_1
cellular_data_2
cellular_data_3
cellular_data_4
cellular_data_5
cellular_off
cellular_warning
center_horizontal
center_vertical
certificate
channel
channel_add
channel_alert
channel_arrow_left
channel_dismiss
channel_share
channel_subtract
chart_multiple
chart_person
chat
chat_arrow_back
chat_arrow_double_back
chat_bubbles_question
chat_dismiss
chat_help
chat_mail
chat_multiple
chat_off
chat_settings
chat_video
chat_warning
check
checkbox_1
checkbox_2
checkbox_arrow_right
checkbox_checked
checkbox_checked_sync
checkbox_indeterminate
checkbox_person
checkbox_unchecked
checkbox_warning
checkmark
checkmark_circle
checkmark_lock
checkmark_note
checkmark_square
checkmark_starburst
checkmark_underline_circle
chevron_circle_down
chevron_circle_left
chevron_circle_right
chevron_circle_up
chevron_double_down
chevron_double_left
chevron_double_right
chevron_double_up
chevron_down
chevron_left
chevron_right
chevron_up
chevron_up_down
circle
circle_edit
circle_half_fill
circle_line
circle_small
city
class
classification
clear_formatting
clipboard
clipboard_arrow_right
clipboard_bullet_list_ltr
clipboard_bullet_list_rtl
clipboard_checkmark
clipboard_clock
clipboard_code
clipboard_data_bar
clipboard_edit
clipboard_error
clipboard_heart
clipboard_image
clipboard_letter
clipboard_link
clipboard_more
clipboard_note
clipboard_paste
clipboard_pulse
clipboard_search
clipboard_settings
clipboard_task
clipboard_task_add
clipboard_task_list_ltr
clipboard_task_list_rtl
clipboard_text_ltr
clipboard_text_rtl
clock
clock_alarm
clock_arrow_download
clock_dismiss
clock_pause
clock_toolbox
closed_caption
closed_caption_off
cloud
cloud_add
cloud_archive
cloud_arrow_down
cloud_arrow_up
cloud_checkmark
cloud_dismiss
cloud_edit
cloud_flow
cloud_link
cloud_off
cloud_swap
cloud_sync
cloud_words
code
collections
collections_add
color
color_background
color_fill
color_line
column_edit
column_triple
column_triple_edit
comma
comment
comment_add
comment_arrow_left
comment_arrow_right
comment_checkmark
comment_dismiss
comment_edit
comment_error
comment_lightning
comment_mention
comment_multiple
comment_multiple_checkmark
comment_multiple_link
comment_note
comment_off
communication
communication_person
compass_northwest
component_2_double_tap_swipe_down
component_2_double_tap_swipe_up
compose
conference_room
connector
contact_card
contact_card_group
contact_card_ribbon
content_settings
content_view_32
content_view_gallery
contract_down_left
control_button
convert_range
cookies
copy
copy_add
copy_arrow_right
copy_select
couch
credit_card_person
credit_card_toolbox
crop
crop_interim
crop_interim_off
cube
cube_multiple
cube_quick
cube_sync
cube_tree
currency_dollar_euro
currency_dollar_rupee
cursor
cursor_click
cursor_hover
cursor_hover_off
cut
dark_theme
data_area
data_bar_horizontal
data_bar_vertical
data_bar_vertical_add
data_funnel
data_histogram
data_line
data_pie
data_scatter
data_sunburst
data_treemap
data_trending
data_usage
data_usage_edit
data_usage_toolbox
data_waterfall
data_whisker
database
database_link
database_person
database_search
decimal_arrow_left
decimal_arrow_right
delete
delete_dismiss
delete_off
dentist
design_ideas
desktop
desktop_arrow_right
desktop_cursor
desktop_edit
desktop_flow
desktop_keyboard
desktop_mac
desktop_pulse
desktop_signal
desktop_speaker
desktop_speaker_off
desktop_sync
desktop_toolbox
developer_board
developer_board_search
device_eq
device_meeting_room
device_meeting_room_remote
diagram
dialpad
dialpad_off
diamond
directions
dismiss
dismiss_circle
dismiss_square
dismiss_square_multiple
diversity
divider_short
divider_tall
dock
dock_row
doctor
document
Outros Pacotes de Ícones
Conforme já explanado, este design system recomenda fortemente o uso da biblioteca Fluent UI System Icons, por seu ajuste ímpar ao estilo visual adotado no Fluent Design e, por consequência, no CPS Design System. Apesar disso, não é terminante proibido usar outras bibliotecas de ícones, desde que o estilo visual geral não seja impactado com a escolha de ícones sem qualquer semelhança visual com este design system.
Cuidado!
Utilizar ícones específicos em formato SVG
de outras bibliotecas não é um problema em si, desde que respeitado o estilo visual. Mas isto não vale para o caso de importar bibliotecas de ícones inteiras (mesmo que em versão Web Font), pois o carregamento de diversas bibliotecas de ícones ao mesmo tempo seria um grave equívoco para o desempenho de carregamento da aplicação, para no final utilizar apenas alguns poucos ícones.
Vale uma menção honrosa à a famosa biblioteca de ícones Font Awesome, recomendada pelo Guia de Estilo Site CPS. Embora tenha um visual agradável, similar ao que prega este design system, e seja muito utilizada em projetos pela web, é uma biblioteca mais limitada, com pouco mais de 2 mil ícones gratuitos (e um foco grande em vender os outros ícones com a versão Pro). Além disso, mesmo a versão gratuita não tem uma licença tão permissiva quanto a biblioteca aqui recomendada.