Icon

Icons can be displayed as a standalone element, or as part of other components that accept icons such as text_field or action_button. Icons can be selected from the built in icon set. See the available icons example below for a listing of all icons.

Example

Available Icons

In the example provided, you can find a showcase of all available icons. Additionally, you have the ability to search for specific icons.

Sizing

Icons support t-shirt sizing, automatically adjusting their size when used within other components. By default, icons are sized as “M” for medium scale on desktops and “L” for large scale on mobile devices.

Coloring

Icons support four semantic colors: negative, notice, positive, and informative. While icons within components are usually styled with the appropriate colors, you can use the color prop to customize the color of standalone icons.

Labeling

By default, icons are treated as decorative and are hidden from assistive technology. When used within a label-less component, such as a button, an aria-label should be assigned to the parent component. If the icon is used on its own, an aria-label can be directly applied to the icon.

API reference

Get a Deephaven icon by name.

Returns: Element The rendered icon element.

Parameters	Type	Default	Description
name	Literal['account', 'activate_breakpoints', 'add', 'archive', 'arrow_both', 'arrow_circle_down', 'arrow_circle_left', 'arrow_circle_right', 'arrow_circle_up', 'arrow_down', 'arrow_left', 'arrow_right', 'arrow_small_down', 'arrow_small_left', 'arrow_small_right', 'arrow_small_up', 'arrow_swap', 'arrow_up', 'azure_devops', 'azure', 'beaker_stop', 'beaker', 'bell_dot', 'bell_slash_dot', 'bell_slash', 'bell', 'blank', 'bold', 'book', 'bookmark', 'bracket_dot', 'bracket_error', 'briefcase', 'broadcast', 'browser', 'bug', 'calendar', 'call_incoming', 'call_outgoing', 'case_sensitive', 'check_all', 'check', 'checklist', 'chevron_down', 'chevron_left', 'chevron_right', 'chevron_up', 'chip', 'chrome_close', 'chrome_maximize', 'chrome_minimize', 'chrome_restore', 'circle_filled', 'circle_large_filled', 'circle_large', 'circle_slash', 'circle_small_filled', 'circle_small', 'circle', 'circuit_board', 'clear_all', 'clippy', 'close_all', 'close', 'cloud_download', 'cloud_upload', 'cloud', 'code_oss', 'code', 'coffee', 'collapse_all', 'color_mode', 'combine', 'comment_discussion', 'comment_draft', 'comment_unresolved', 'comment', 'compass_active', 'compass_dot', 'compass', 'copilot', 'copy', 'coverage', 'credit_card', 'dash', 'dashboard', 'database', 'debug_all', 'debug_alt_small', 'debug_alt', 'debug_breakpoint_conditional_unverified', 'debug_breakpoint_conditional', 'debug_breakpoint_data_unverified', 'debug_breakpoint_data', 'debug_breakpoint_function_unverified', 'debug_breakpoint_function', 'debug_breakpoint_log_unverified', 'debug_breakpoint_log', 'debug_breakpoint_unsupported', 'debug_console', 'debug_continue_small', 'debug_continue', 'debug_coverage', 'debug_disconnect', 'debug_line_by_line', 'debug_pause', 'debug_rerun', 'debug_restart_frame', 'debug_restart', 'debug_reverse_continue', 'debug_stackframe_active', 'debug_stackframe', 'debug_start', 'debug_step_back', 'debug_step_into', 'debug_step_out', 'debug_step_over', 'debug_stop', 'debug', 'desktop_download', 'device_camera_video', 'device_camera', 'device_mobile', 'diff_added', 'diff_ignored', 'diff_modified', 'diff_multiple', 'diff_removed', 'diff_renamed', 'diff_single', 'diff', 'discard', 'edit', 'editor_layout', 'ellipsis', 'empty_window', 'error_small', 'error', 'exclude', 'expand_all', 'export', 'extensions', 'eye_closed', 'eye', 'feedback', 'file_binary', 'file_code', 'file_media', 'file_pdf', 'file_submodule', 'file_symlink_directory', 'file_symlink_file', 'file_zip', 'file', 'files', 'filter_filled', 'filter', 'flame', 'fold_down', 'fold_up', 'fold', 'folder_active', 'folder_library', 'folder_opened', 'folder', 'game', 'gear', 'gift', 'gist_secret', 'gist', 'git_commit', 'git_compare', 'git_fetch', 'git_merge', 'git_pull_request_closed', 'git_pull_request_create', 'git_pull_request_draft', 'git_pull_request_go_to_changes', 'git_pull_request_new_changes', 'git_pull_request', 'git_stash_apply', 'git_stash_pop', 'git_stash', 'github_action', 'github_alt', 'github_inverted', 'github_project', 'github', 'globe', 'go_to_file', 'go_to_search', 'grabber', 'graph_left', 'graph_line', 'graph_scatter', 'graph', 'gripper', 'group_by_ref_type', 'heart_filled', 'heart', 'history', 'home', 'horizontal_rule', 'hubot', 'inbox', 'indent', 'info', 'insert', 'inspect', 'issue_draft', 'issue_reopened', 'issues', 'italic', 'jersey', 'json', 'kebab_vertical', 'key', 'law', 'layers_active', 'layers_dot', 'layers', 'layout_activitybar_left', 'layout_activitybar_right', 'layout_centered', 'layout_menubar', 'layout_panel_center', 'layout_panel_justify', 'layout_panel_left', 'layout_panel_off', 'layout_panel_right', 'layout_panel', 'layout_sidebar_left_off', 'layout_sidebar_left', 'layout_sidebar_right_off', 'layout_sidebar_right', 'layout_statusbar', 'layout', 'library', 'lightbulb_autofix', 'lightbulb_sparkle', 'lightbulb', 'link_external', 'link', 'list_filter', 'list_flat', 'list_ordered', 'list_selection', 'list_tree', 'list_unordered', 'live_share', 'loading', 'location', 'lock_small', 'lock', 'magnet', 'mail_read', 'mail', 'map_filled', 'map_vertical_filled', 'map_vertical', 'map', 'markdown', 'megaphone', 'mention', 'menu', 'merge', 'mic_filled', 'mic', 'milestone', 'mirror', 'mortar_board', 'move', 'multiple_windows', 'music', 'mute', 'new_file', 'new_folder', 'newline', 'no_newline', 'note', 'notebook_template', 'notebook', 'octoface', 'open_preview', 'organization', 'output', 'package', 'paintcan', 'pass_filled', 'pass', 'percentage', 'person_add', 'person', 'piano', 'pie_chart', 'pin', 'pinned_dirty', 'pinned', 'play_circle', 'play', 'plug', 'preserve_case', 'preview', 'primitive_square', 'project', 'pulse', 'question', 'quote', 'radio_tower', 'reactions', 'record_keys', 'record_small', 'record', 'redo', 'references', 'refresh', 'regex', 'remote_explorer', 'remote', 'remove', 'replace_all', 'replace', 'reply', 'repo_clone', 'repo_force_push', 'repo_forked', 'repo_pull', 'repo_push', 'repo', 'report', 'request_changes', 'robot', 'rocket', 'root_folder_opened', 'root_folder', 'rss', 'ruby', 'run_above', 'run_all_coverage', 'run_all', 'run_below', 'run_coverage', 'run_errors', 'save_all', 'save_as', 'save', 'screen_full', 'screen_normal', 'search_fuzzy', 'search_stop', 'search', 'send', 'server_environment', 'server_process', 'server', 'settings_gear', 'settings', 'share', 'shield', 'sign_in', 'sign_out', 'smiley', 'snake', 'sort_precedence', 'source_control', 'sparkle_filled', 'sparkle', 'split_horizontal', 'split_vertical', 'squirrel', 'star_empty', 'star_full', 'star_half', 'stop_circle', 'surround_with', 'symbol_array', 'symbol_boolean', 'symbol_class', 'symbol_color', 'symbol_constant', 'symbol_enum_member', 'symbol_enum', 'symbol_event', 'symbol_field', 'symbol_file', 'symbol_interface', 'symbol_key', 'symbol_keyword', 'symbol_method', 'symbol_misc', 'symbol_namespace', 'symbol_numeric', 'symbol_operator', 'symbol_parameter', 'symbol_property', 'symbol_ruler', 'symbol_snippet', 'symbol_string', 'symbol_structure', 'symbol_variable', 'sync_ignored', 'sync', 'table', 'tag', 'target', 'tasklist', 'telescope', 'terminal_bash', 'terminal_cmd', 'terminal_debian', 'terminal_linux', 'terminal_powershell', 'terminal_tmux', 'terminal_ubuntu', 'terminal', 'text_size', 'three_bars', 'thumbsdown_filled', 'thumbsdown', 'thumbsup_filled', 'thumbsup', 'tools', 'trash', 'triangle_down', 'triangle_left', 'triangle_right', 'triangle_up', 'twitter', 'type_hierarchy_sub', 'type_hierarchy_super', 'type_hierarchy', 'unfold', 'ungroup_by_ref_type', 'unlock', 'unmute', 'unverified', 'variable_group', 'verified_filled', 'verified', 'versions', 'vm_active', 'vm_connect', 'vm_outline', 'vm_running', 'vm', 'vr', 'vscode_insiders', 'vscode', 'wand', 'warning', 'watch', 'whitespace', 'whole_word', 'window', 'word_wrap', 'workspace_trusted', 'workspace_unknown', 'workspace_untrusted', 'zoom_in', 'zoom_out', 'dh_add_small', 'dh_arrow_to_bottom', 'dh_arrow_to_top', 'dh_check_square', 'dh_chevron_down_square', 'dh_circle_large_outline_notch', 'dh_clock', 'dh_exclamation', 'dh_eye_slash', 'dh_eye', 'dh_file_certificate', 'dh_file_csv', 'dh_file_download', 'dh_file_print', 'dh_file_search', 'dh_file_spreadsheet', 'dh_filter_filled', 'dh_filter_slash', 'dh_freeze', 'dh_gear_filled', 'dh_gears_filled', 'dh_graph_line_down', 'dh_graph_line_up', 'dh_i_cursor', 'dh_input', 'dh_new_circle_large_filled', 'dh_new_square_filled', 'dh_organization_add', 'dh_pandas', 'dh_panels', 'dh_python', 'dh_refresh', 'dh_remove_square_filled', 'dh_run_selection', 'dh_shapes', 'dh_share_filled', 'dh_share', 'dh_sort_alpha_down', 'dh_sort_alpha_up', 'dh_sort_amount_down', 'dh_sort_down', 'dh_sort_slash', 'dh_sort_up', 'dh_sort', 'dh_split_both', 'dh_square_filled', 'dh_sticky_note_filled', 'dh_strikethrough', 'dh_table', 'dh_trash_undo', 'dh_triangle_down_square', 'dh_truck', 'dh_underline', 'dh_unlink', 'dh_user_incognito', 'dh_user', 'dh_warning_circle_filled', 'dh_warning_filled']		The name of the icon to get.
size	Literal['XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'] | None	None	The size of the icon (changes based on scale).
key	str | None	None	A unique identifier used by React to render elements in a list.