Styleguide: Font Awesome

Icons are visual representations of commands, files or common actions. They should be meaningful, simple and legible. pgAdmin uses custom as well as Font Awesome 5 icons.

Guidelines for icon selection:

  • Icons should be suggestive of the associated functionality.
  • Custom icons are used for Tree view and Query explain section. Font Awesome icons are used for all other commands, actions and files.
  • Use both filled and outlined icons depending the required context and legibility.
  • Clickable icons must have a tooltip attached to let the user know what happens when it is clicked.

Font Awesome version 5.14.0 (14x14px)


fa-save

fa-edit

fa-anchor

fa-arrow-circle-right

fa-arrows-alt-h

fa-arrows-alt-v

fa-chevron-right

fa-chevron-down

fa-check-square

fa-check

fa-unlink

fa-caret-right

fa-circle

fa-paste

fa-times

fa-cogs

fa-copy

fa-download

fa-indent

fa-hourglass-half

fa-home

fa-hdd

fa-hand-pointer

fa-globe

fa-file

fa-external-link-alt

fa-exclamation-triangle

fa-exclamation-circle

fa-exchange-alt

fa-info-circle

fa-chart-line

fa-list-alt

fa-lock

fa-long-arrow-alt-right

fa-magic

fa-outdent

fa-plus

fa-question

fa-recycle

fa-sync-alt

fa-redo-alt

fa-search

fa-unlock

fa-level-up-alt

fa-unlock-alt

fa-book

fa-backward

fa-ban

fa-caret-down

fa-calendar-check

fa-bug

fa-calendar-alt

fa-play

fa-upload

fa-eraser

fa-ellipsis-v

fa-filter

fa-eye

fa-search-plus

fa-play-circle

fa-forward

fa-folder-open

fa-user-circle

fa-file-code

fa-key

fa-server

fa-wrench

fa-users

fa-pause-circle

fa-pencil-alt

fa-info

fa-search-minus

fa-times-circle

fa-th-list

fa-table

fa-stop-circle

fa-shopping-cart

fa-stop

fa-chart-bar

fa-link

fa-trash

fa-clock

fa-file-alt

Note: These are the icons we have used throughout pgAdmin and may be changed or updated from version to version.

<i class="Icon name" data-toggle="tooltip" title="Icon title" aria-label="Icon label"></i>

Font Awesome version 5.14.0 (14x14px)


fa-save

fa-edit

fa-anchor

fa-arrow-circle-right

fa-arrows-alt-h

fa-arrows-alt-v

fa-chevron-right

fa-chevron-down

fa-check-square

fa-check

fa-unlink

fa-caret-right

fa-circle

fa-paste

fa-times

fa-cogs

fa-copy

fa-download

fa-indent

fa-hourglass-half

fa-home

fa-hdd

fa-hand-pointer

fa-globe

fa-file

fa-external-link-alt

fa-exclamation-triangle

fa-exclamation-circle

fa-exchange-alt

fa-info-circle

fa-chart-line

fa-list-alt

fa-lock

fa-long-arrow-alt-right

fa-magic

fa-outdent

fa-plus

fa-question

fa-recycle

fa-sync-alt

fa-redo-alt

fa-search

fa-unlock

fa-level-up-alt

fa-unlock-alt

fa-book

fa-backward

fa-ban

fa-caret-down

fa-calendar-check

fa-bug

fa-calendar-alt

fa-play

fa-upload

fa-eraser

fa-ellipsis-v

fa-filter

fa-eye

fa-search-plus

fa-play-circle

fa-forward

fa-folder-open

fa-user-circle

fa-file-code

fa-key

fa-server

fa-wrench

fa-users

fa-pause-circle

fa-pencil-alt

fa-info

fa-search-minus

fa-times-circle

fa-th-list

fa-table

fa-stop-circle

fa-shopping-cart

fa-stop

fa-chart-bar

fa-link

fa-trash

fa-clock

fa-file-alt

Note: These are the icons we have used throughout pgAdmin and may be changed or updated from version to version.

<i class="Icon name" data-toggle="tooltip" title="Icon title" aria-label="Icon label"></i>

Font Awesome version 5.14.0 (14x14px)


fa-save

fa-edit

fa-anchor

fa-arrow-circle-right

fa-arrows-alt-h

fa-arrows-alt-v

fa-chevron-right

fa-chevron-down

fa-check-square

fa-check

fa-unlink

fa-caret-right

fa-circle

fa-paste

fa-times

fa-cogs

fa-copy

fa-download

fa-indent

fa-hourglass-half

fa-home

fa-hdd

fa-hand-pointer

fa-globe

fa-file

fa-external-link-alt

fa-exclamation-triangle

fa-exclamation-circle

fa-exchange-alt

fa-info-circle

fa-chart-line

fa-list-alt

fa-lock

fa-long-arrow-alt-right

fa-magic

fa-outdent

fa-plus

fa-question

fa-recycle

fa-sync-alt

fa-redo-alt

fa-search

fa-unlock

fa-level-up-alt

fa-unlock-alt

fa-book

fa-backward

fa-ban

fa-caret-down

fa-calendar-check

fa-bug

fa-calendar-alt

fa-play

fa-upload

fa-eraser

fa-ellipsis-v

fa-filter

fa-eye

fa-search-plus

fa-play-circle

fa-forward

fa-folder-open

fa-user-circle

fa-file-code

fa-key

fa-server

fa-wrench

fa-users

fa-pause-circle

fa-pencil-alt

fa-info

fa-search-minus

fa-times-circle

fa-th-list

fa-table

fa-stop-circle

fa-shopping-cart

fa-stop

fa-chart-bar

fa-link

fa-trash

fa-clock

fa-file-alt

Note: These are the icons we have used throughout pgAdmin and may be changed or updated from version to version.

<i class="Icon name" data-toggle="tooltip" title="Icon title" aria-label="Icon label"></i>