Icon
Usage
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 is 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.
Components Used In
Icons are used as atoms in the following components:
Molecules:
Organisms:
Templates:
Exceptions
- The Avatar icon is used only as a placeholder image until the user replaces it with an actual avatar/profile picture. Even though it is saved in the design system as an icon, it is not in harmony with the other icons as it is a fill icon and not outline.
- It should not be used in any other context except as a placeholder image wherever a profile picture can be displayed.
Anatomy and Behavior
Icons are vector based design assets that can be exported as SVGs only.
Gaps and Sizes
Icons' gaps and sizes are defined in the context of each molecule component in which they are used. Since they are scalable vector graphics, their sizes can be manipulated without loss of quality.
For example: Here we can see the icons adapting both in size and gaps based on properties inherited from the app button component
Configurations
| Icons | ||||
|---|---|---|---|---|
| Category | Name | Small | Medium | Large | Arrows |
| back | ||||
| collapse | ||||
| expand_1 | ||||
| expand_2 | ||||
| forward | ||||
| redo | ||||
| reload | ||||
| sync | ||||
| undo | ||||
| apply | ||||
| arrows_outward | ||||
| scroll | Chevron | |||
| chevron_down | ||||
| chevron_left | ||||
| chevron_right | ||||
| chevron_up | ||||
| double_chevron_down | ||||
| double_chevron_left | ||||
| double_chevron_right | ||||
| double_chevron_up | CRUD_Operations | |||
| close | ||||
| duster | ||||
| edit | ||||
| minus | ||||
| plus | ||||
| tick | General | |||
| add_home_work | ||||
| apps | ||||
| apps_arrow | ||||
| attachment | ||||
| bug | ||||
| calendar | ||||
| circle | ||||
| cloud_upload | ||||
| door | ||||
| download | ||||
| opening | ||||
| duplicate | ||||
| export | ||||
| export_files | ||||
| file | ||||
| folder | ||||
| gear | ||||
| help | ||||
| home | ||||
| home_work | ||||
| image_arrow_up | ||||
| language | ||||
| list | ||||
| login | ||||
| logout | ||||
| more_options | ||||
| new_tab | ||||
| no_split_scene | ||||
| notification | ||||
| notification_update | ||||
| pohlcon_logo | ||||
| preview | ||||
| rectangle | ||||
| save | ||||
| screen_with_apps | ||||
| screen_with_download | ||||
| screen_with_gear | ||||
| screen_with_web | ||||
| search | ||||
| send | ||||
| split_scene | ||||
| swatch | ||||
| swatch_alert | ||||
| trash | ||||
| upload | ||||
| villa | ||||
| villa_info | ||||
| window | ||||
| zoom_in | ||||
| zoom_out | ||||
| output | ||||
| link_off | ||||
| add_link | ||||
| rows | ||||
| columns | ||||
| angle | ||||
| axes | ||||
| checklist | ||||
| menu | Filters | |||
| filter | ||||
| filter_dropdown | ||||
| filter_dropdown_message | ||||
| filter_remove | JVA_Webapp | |||
| ai | ||||
| construction | ||||
| jva_f | ||||
| jva_n | Layers | |||
| add_layer | ||||
| hidden_layer | ||||
| layer | ||||
| multiple_layers | ||||
| search_layer | Status | |||
| alert | ||||
| check | ||||
| check_filled | ||||
| error | ||||
| eye | ||||
| eye_hidden | ||||
| info | ||||
| locked | ||||
| unlocked | User | |||
| add_user | ||||
| avatar | ||||
| remove_user | ||||
| search_user | ||||
| star_user | ||||
| user | File_Formats | |||
| excel | ||||
| cube | ||||
| cube_group | ||||
| dwg | Fibernox | |||
| fibernox_logo | ||||
| standard_wall | ||||
| sloped_side_wall_right | ||||
| sloped_side_wall_left | ||||
| attic_wall | ||||
| coordinates | ||||
| custom_geometry | ||||
| sandwich_core_layer | ||||
| sandwich_insulation | ||||
| sandwich_outside_layer | ||||
| layout | ||||
| loads | ||||
| ruler | ||||
| element_core_layer | ||||
| element_inside_layer | ||||
| element_insulation | ||||
| element_outside_layer | ||||
ts
export type IconProps =
& ElementProps
& TooltipProps
& {
/** */
icon: IconName;
/** */
size?: GutterSize;
/** */
color?: string;
}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
duplicate
duster
dwg
edit
element_core_layer
element_inside_layer
element_insulation
element_outside_layer
error
excel
expand_1
expand_2
export
export_files
eye
eye_hidden
fibernox_logo
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
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
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_user
swatch
swatch_alert
sync
tick
trash
undo
unlocked
upload
user
villa
villa_info
window
zoom_in
zoom_out