Icons


Small icon set

This design used lots of whitespace, small type and blue links in a lot of places. In addition there is a visual language of small, clear icons used in toolbars and lists to add meaning and grouping to the page.

The main set of visual language is a set of icons, mostly in one sprite, and are based partly on the Glyphicons Halflings set used in Bootstrap. If you need additional icons, one of these will probably work well.

Spanner / Actions or Tools

Action / Add or join a thing

Action / Add a new thing

Action / Edit a thing

Action / Print

Action / Remove or Delete

Action / Add a link or attachment

Action / Duplicate

Action / Merge Tags

Action / Send or Resend message

Cog / Settings or Customisation

Shopping cart / Used for materials

Clock / Used for events, dates, times

Metadata / Type: Generic Document

Metadata / Type: Tag or Keyword

Metadata / Type: Link or Attachment

Metadata / Type: Book or Report

Metadata / Type: Experiment or Material

Metadata / Type: Graph, Data or Figure

Metadata / Type: Protocol or List

Metadata / Type: Gene or DNA Sequence

Metadata / Type: Cells

Metadata / Type: Plasmids


Filter / Apply, switch or change filters

Favourite / Off, can be made a favourite

Favourite / On

Lock / Secure or private items

Unlock / Remove security, public data

Check Lock / Change password, apply security

User / Active users

User / Inactive or unavailable users

File / Data Upload

File / Data Download

Status / Done or Complete items

Affordance / Handle to drag horizontally

Affordance / Arrow indicates item contains multiples, click to reveal

Affordance / Arrow indicates item is sorted top to bottom, click to reverse sorting order

Affordance / Arrow indicates item is sorted bottom to top, click to reverse sorting order

Miscellaneous Icons

Apart from this visual language, plus boxes, lines and arrows, there are only a few additional icons.

big-link big-paperclip big-tag blue-file required-star