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
from deephaven import ui
@ui.component
def icons():
icon = ui.icon("filter")
return icon
my_icons = icons()
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.
from deephaven.ui.components.types import IconTypes
from deephaven import ui
from typing import get_args
@ui.component
def icon_search_example():
available_icons = [*get_args(IconTypes)]
filtered_icons, set_filtered_icons = ui.use_state(available_icons)
def filter_icons(search):
new_icons = []
for icon in available_icons:
if search in icon:
new_icons.append(icon)
set_filtered_icons(new_icons)
def render_icons():
entries = []
for icon in filtered_icons:
entries.append(
ui.flex(
ui.icon(icon),
ui.text(icon, color="gray-700"),
direction="column",
align_items="center",
)
)
return ui.grid(entries, columns="repeat(auto-fit, minmax(250px, 1fr))")
return ui.panel(
ui.view(
ui.text_field(
ui.icon("search"),
label="Search icons",
width="100%",
on_change=filter_icons,
),
position="sticky",
top="0px",
padding="size-100",
background_color="surface-bg",
border_bottom_width="thin",
border_bottom_color="bg",
width="100%",
),
render_icons(),
padding=0,
)
my_icon_search_example = icon_search_example()
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.
from deephaven import ui
@ui.component
def icons():
small = ui.icon("bell", size="S")
default = ui.icon("bell")
large = ui.icon("bell", size="L")
return [small, default, large]
my_icons = icons()
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.
from deephaven import ui
@ui.component
def icons():
negative = ui.icon("bell", color="negative")
informative = ui.icon("bell", color="informative")
positive = ui.icon("bell", color="positive")
return [negative, informative, positive]
my_icons = 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.
from deephaven import ui
@ui.component
def icons():
icon_button = ui.action_button(ui.icon("squirrel"), aria_label="squirrel")
return icon_button
my_icons = icons()
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. |