Fork me on GitHub

Styleguide: Custom Icons

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.

Custom Solid Icons (14x14px)

commit
compare
connect
disconnect
drop_cascade
query_tool
rollback
row_filter
save_data
_changes

script
<div class="wcFrameButton pg-toolbar-btn btn-secondary" title="Query Tool" aria-label="Query Tool"> <div class="pg-font-icon icon-query-tool"></div> </div>

Custom Solid Icons (14x14px)

commit
compare
connect
disconnect
drop_cascade
query_tool
rollback
row_filter
save_data
_changes

script
<div class="wcFrameButton pg-toolbar-btn btn-secondary" title="Query Tool" aria-label="Query Tool"> <div class="pg-font-icon icon-query-tool"></div> </div>

Custom Solid Icons (14x14px)

commit
compare
connect
disconnect
drop_cascade
query_tool
rollback
row_filter
save_data
_changes

script
<div class="wcFrameButton pg-toolbar-btn btn-secondary" title="Query Tool" aria-label="Query Tool"> <div class="pg-font-icon icon-query-tool"></div> </div>