Bauhaus Design System

Icon ​

Atom

Icons are atoms in our structure. They are compact symbols that represent discrete objects, actions, or ideas. The icons created are to be used consistently across PohlCon and other sub-brands; JORDAHL, HBAU and PUK.

  • They should be used consistently across all applications to maintain design/icon integrity and recognition.
  • If an icon is updated or replaced, one must check all the components impacted that are nesting this particular icon whether or not they maintain visual balance.
  • If a new component is created using that isP using Icon atom, it must be added to the list below.
  • Icons are usually nested within other molecule components, however in some cases they are used by themselves for the purposes of illustrating something and without any interactions. An example of this is when an icon is used to illustrate an error message to depict an empty state (e.g. broken link) of a web page.

Properties ​

ts

export interface IconProps extends ElementProps, TooltipProps {
  icon: IconName;
  size?: GutterSize;
  color?: string;
}

Playground

Playground Theme

Icon
        
          

            <
            Icon

            






            

                icon
              
                =
                "add_home_work"
              


                tooltip
              
                =
                "Icon"
              


                size
              
                =
                "l"
              


                color
              
                =
                "#000000"
              


                tooltipPosition
              
                =
                "top-center"
              





  />

Search

add_home_work
add_layer
add_link
add_user
ai
alert
angle
apply
apps
apps_arrow
arrows_outward
attachment
attic_wall
avatar
axes
back
bug
calendar
check
check_filled
checklist
chevron_down
chevron_left
chevron_right
chevron_up
circle
close
cloud_upload
collapse
columns
construction
coordinates
cube
cube_group
custom_geometry
door
double_chevron_down
double_chevron_left
double_chevron_right
double_chevron_up
download
downward
duplicate
duster
dwg
edit
element_core_layer
element_inside_layer
element_insulation
element_outside_layer
error
excel
expand_1
expand_2
export_files
eye
eye_hidden
fibernox_logo
fibernox_no_tip
file
filter
filter_dropdown
filter_dropdown_message
filter_remove
folder
forward
gear
help
hidden_layer
home
home_work
image_arrow_up
info
jva_f
jva_n
language
layer
layout
link_off
list
lists
loads
locked
login
logout
mail
menu
minus
more_options
multiple_layers
new_tab
no_split_scene
notification
notification_update
opening
output
plus
pohlcon_logo
preview
question
rectangle
redo
reload
remove_user
rows
ruler
sandwich_core_layer
sandwich_insulation
sandwich_outside_layer
save
screen_with_apps
screen_with_download
screen_with_gear
screen_with_web
scroll
search
search_layer
search_user
send
sloped_side_wall_left
sloped_side_wall_right
split_scene
standard_wall
star_shine
star_user
sum
swatch
swatch_alert
sync
tick
trash
undo
unlocked
upload
upward
user
villa
villa_add
villa_info
window
zoom_in
zoom_out

Anatomy and Behavior ​

Icons are vector based design assets that can be exported as SVGs only.