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 | 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 | ||||
| dropdown | ||||
| 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 | ||||
| translate | ||||
| trash | ||||
| upload | ||||
| villa | ||||
| windows | ||||
| zoom_in | ||||
| zoom_out | Filters | |||
| filter | ||||
| filter_dropdown | ||||
| filter_dropdown_message | ||||
| filter_remove | JVA_Webapp | |||
| ai | ||||
| construction | ||||
| jva_f | ||||
| jva_n | ||||
| union | 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 | ||||
ts
export type IconProps =
& ElementProps
& TooltipProps
& {
/** */
icon: IconName;
/** */
size?: GutterSize;
/** */
color?: string;
}Search
add_home_work
add_layer
add_user
ai
alert
apps
apps_arrow
attachment
avatar
back
bug
calendar
check
check_filled
chevron_down
chevron_left
chevron_right
chevron_up
circle
close
cloud_upload
collapse
construction
cube
cube_group
door
double_chevron_down
double_chevron_left
double_chevron_right
double_chevron_up
download
dropdown
duplicate
duster
edit
error
excel
expand_1
expand_2
export
export_files
eye
eye_hidden
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
list
locked
login
logout
mail
minus
more_options
multiple_layers
new_tab
no_split_scene
notification
notification_update
plus
pohlcon_logo
preview
rectangle
redo
reload
remove_user
save
screen_with_apps
screen_with_download
screen_with_gear
screen_with_web
search
search_layer
search_user
send
split_scene
star_user
swatch
swatch_alert
sync
tick
translate
trash
undo
union
unlocked
upload
user
villa
windows
zoom_in
zoom_out