Edit layout

EMBL-EBI Icon fonts for the life sciences

EMBL-EBI has produced a robust set of icon fonts that represent actions and things common in our field, like databases; actions, like uploading; concepts, like gene expression; or platforms, like e-mail or Twitter.

EBI Icons v1.3 have been released

As of 17 Dec 2018, v1.3 of these icons have are available for use in production.

The update brings more icons along with simpler usage: see them here

If you're in need of an icon for a squirrel, bucket, or something useful: Request an icon

Using these fonts

To use these on a website, include the fonts.css stylesheet listed below, and use the HTML code examples listed in the gallery further down the page.

  • You can load the default CSS by linking to the v1.2 release at ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css
  • To make the icons appear, you need to include particular class and data-icon attributes in the relevant HTML element:

    <strong><i class="icon icon-generic" data-icon="4"></i> This is an example icon</strong>

    The browser's CSS parser will read the data-icon parameter and use the icon pictogram corresponding to "4":

    This is an example icon

  • The EBI Visual framework no longer adds automatic padding to icons (in most scenarios), if you want to add padding, use the helper classes or add .icon-spacer to the .icon's element.

If your computer does not already have these fonts installed, use the links to download TTF files. Need help installing?

NB: You can preview the icons below.

Need to do something else?

Need help?

Head to the issue queue

Just a bit of guidance?

For more information on using fonts with the EMBL-EBI Visual Framework and making the most of the framework, view the EBI Style Lab

Looking for "Corporate" fonts?

If you are making official EMBL-EBI documents, including slides and posters, it's best if you use Helvetica Neue Pro in your headings.

The gallery

EBI-Generic version 1.2 HTML Drupal
Accommodation <* class="icon icon-generic" data-icon="a"> [icon-generic:a]
Alert <* class="icon icon-generic" data-icon="l"> [icon-generic:l]
Alumni <* class="icon icon-generic" data-icon="A"> [icon-generic:A]
Announcement <* class="icon icon-generic" data-icon="U"> [icon-generic:U]
Basket <* class="icon icon-generic" data-icon="b"> [icon-generic:b]
Beta <* class="icon icon-generic" data-icon=">"> [icon-generic:>]
Bike <* class="icon icon-generic" data-icon="3"> [icon-generic:3]
Biotech <* class="icon icon-generic" data-icon="B"> [icon-generic:B]
Bus <* class="icon icon-generic" data-icon="1"> [icon-generic:1]
Calendar <* class="icon icon-generic" data-icon="r"> [icon-generic:r]
Camera <* class="icon icon-generic" data-icon="!"> [icon-generic:!]
Car <* class="icon icon-generic" data-icon="2"> [icon-generic:2]
Careers <* class="icon icon-generic" data-icon="c"> [icon-generic:c]
Classification <* class="icon icon-generic" data-icon="e"> [icon-generic:e]
Clock <* class="icon icon-generic" data-icon="{"> [icon-generic:{]
Contact <* class="icon icon-generic" data-icon="C"> [icon-generic:C]
Crosslink <* class="icon icon-generic" data-icon="d"> [icon-generic:d]
Database <* class="icon icon-generic" data-icon="D"> [icon-generic:D]
Discuss <* class="icon icon-generic" data-icon="\"> [icon-generic:\]
Documentation <* class="icon icon-generic" data-icon=";"> [icon-generic:;]
Drug <* class="icon icon-generic" data-icon="u"> [icon-generic:u]
Elixir <* class="icon icon-generic" data-icon="%"> [icon-generic:%]
Email <* class="icon icon-generic" data-icon="E"> [icon-generic:E]
Embl <* class="icon icon-generic" data-icon="&"> [icon-generic:&]
External link <* class="icon icon-generic" data-icon="x"> [icon-generic:x]
External systems <* class="icon icon-generic" data-icon="y"> [icon-generic:y]
Face to face <* class="icon icon-generic" data-icon="f"> [icon-generic:f]
Find us <* class="icon icon-generic" data-icon="]"> [icon-generic:]]
Funding <* class="icon icon-generic" data-icon="F"> [icon-generic:F]
Graph <* class="icon icon-generic" data-icon="g"> [icon-generic:g]
Group <* class="icon icon-generic" data-icon="}"> [icon-generic:}]
Gtls <* class="icon icon-generic" data-icon="G"> [icon-generic:G]
Health <* class="icon icon-generic" data-icon="h"> [icon-generic:h]
Help <* class="icon icon-generic" data-icon="?"> [icon-generic:?]
Home <* class="icon icon-generic" data-icon="H"> [icon-generic:H]
Industry <* class="icon icon-generic" data-icon="I"> [icon-generic:I]
Info <* class="icon icon-generic" data-icon="i"> [icon-generic:i]
Link <* class="icon icon-generic" data-icon="L"> [icon-generic:L]
Location <* class="icon icon-generic" data-icon="["> [icon-generic:[]
Lovedata <* class="icon icon-generic" data-icon="o"> [icon-generic:o]
Mailing list <* class="icon icon-generic" data-icon="m"> [icon-generic:m]
Math <* class="icon icon-generic" data-icon="v"> [icon-generic:v]
Meet us <* class="icon icon-generic" data-icon="M"> [icon-generic:M]
Mobile device <* class="icon icon-generic" data-icon="/"> [icon-generic:/]
New <* class="icon icon-generic" data-icon="<"> [icon-generic:<]
Newcomers <* class="icon icon-generic" data-icon="n"> [icon-generic:n]
News <* class="icon icon-generic" data-icon="N"> [icon-generic:N]
Nutraceuticals <* class="icon icon-generic" data-icon="""> [icon-generic:"]
Open day <* class="icon icon-generic" data-icon="O"> [icon-generic:O]
Piechart <* class="icon icon-generic" data-icon="p"> [icon-generic:p]
Plane <* class="icon icon-generic" data-icon="4"> [icon-generic:4]
Publication <* class="icon icon-generic" data-icon="P"> [icon-generic:P]
Research <* class="icon icon-generic" data-icon=")"> [icon-generic:)]
Resource <* class="icon icon-generic" data-icon="R"> [icon-generic:R]
Reviewed data <* class="icon icon-generic" data-icon="q"> [icon-generic:q]
Services <* class="icon icon-generic" data-icon="("> [icon-generic:(]
Steps <* class="icon icon-generic" data-icon="#"> [icon-generic:#]
Support <* class="icon icon-generic" data-icon="s"> [icon-generic:s]
Systems <* class="icon icon-generic" data-icon="S"> [icon-generic:S]
Terms <* class="icon icon-generic" data-icon="'"> [icon-generic:']
Test <* class="icon icon-generic" data-icon="0"> [icon-generic:0]
Text mining <* class="icon icon-generic" data-icon="X"> [icon-generic:X]
Toolkit <* class="icon icon-generic" data-icon=":"> [icon-generic::]
Train <* class="icon icon-generic" data-icon="7"> [icon-generic:7]
Training <* class="icon icon-generic" data-icon="T"> [icon-generic:T]
Tutorial <* class="icon icon-generic" data-icon="t"> [icon-generic:t]
Unreviewed data <* class="icon icon-generic" data-icon="Q"> [icon-generic:Q]
Video <* class="icon icon-generic" data-icon="V"> [icon-generic:V]
Walk <* class="icon icon-generic" data-icon="6"> [icon-generic:6]
EBI-Chemistry version 1.2 HTML Drupal
Direction left <* class="icon icon-chemistry" data-icon="l"> [icon-chemistry:l]
Direction reversible <* class="icon icon-chemistry" data-icon="R"> [icon-chemistry:R]
Direction right <* class="icon icon-chemistry" data-icon="r"> [icon-chemistry:r]
Direction unknown <* class="icon icon-chemistry" data-icon="U"> [icon-chemistry:U]
EBI-Conceptual version 1.2 HTML Drupal
Chemical <* class="icon icon-conceptual" data-icon="b"> [icon-conceptual:b]
Cross domain <* class="icon icon-conceptual" data-icon="c"> [icon-conceptual:c]
Dna <* class="icon icon-conceptual" data-icon="d"> [icon-conceptual:d]
Expression <* class="icon icon-conceptual" data-icon="g"> [icon-conceptual:g]
Literature <* class="icon icon-conceptual" data-icon="l"> [icon-conceptual:l]
Ontology <* class="icon icon-conceptual" data-icon="o"> [icon-conceptual:o]
Proteins <* class="icon icon-conceptual" data-icon="P"> [icon-conceptual:P]
Structures <* class="icon icon-conceptual" data-icon="s"> [icon-conceptual:s]
Systems <* class="icon icon-conceptual" data-icon="y"> [icon-conceptual:y]
EBI-FileFormats version 1.2 HTML Drupal
Agp <* class="icon icon-fileformats" data-icon="A"> [icon-fileformats:A]
Bam <* class="icon icon-fileformats" data-icon="B"> [icon-fileformats:B]
Cml <* class="icon icon-fileformats" data-icon="C"> [icon-fileformats:C]
Cram <* class="icon icon-fileformats" data-icon="R"> [icon-fileformats:R]
Csv <* class="icon icon-fileformats" data-icon="c"> [icon-fileformats:c]
Doc <* class="icon icon-fileformats" data-icon="d"> [icon-fileformats:d]
Fasta <* class="icon icon-fileformats" data-icon="a"> [icon-fileformats:a]
Fastq <* class="icon icon-fileformats" data-icon="f"> [icon-fileformats:f]
Flat <* class="icon icon-fileformats" data-icon="F"> [icon-fileformats:F]
Gff <* class="icon icon-fileformats" data-icon="G"> [icon-fileformats:G]
Img <* class="icon icon-fileformats" data-icon="I"> [icon-fileformats:I]
Json <* class="icon icon-fileformats" data-icon="J"> [icon-fileformats:J]
Mdl <* class="icon icon-fileformats" data-icon="M"> [icon-fileformats:M]
Obo <* class="icon icon-fileformats" data-icon="O"> [icon-fileformats:O]
Owl <* class="icon icon-fileformats" data-icon="o"> [icon-fileformats:o]
Pdf <* class="icon icon-fileformats" data-icon="p"> [icon-fileformats:p]
Postscript <* class="icon icon-fileformats" data-icon="3"> [icon-fileformats:3]
Psi mi tab <* class="icon icon-fileformats" data-icon="2"> [icon-fileformats:2]
Psi mi xml <* class="icon icon-fileformats" data-icon="1"> [icon-fileformats:1]
Rd <* class="icon icon-fileformats" data-icon="r"> [icon-fileformats:r]
Rdf xml <* class="icon icon-fileformats" data-icon="D"> [icon-fileformats:D]
Rxn <* class="icon icon-fileformats" data-icon="X"> [icon-fileformats:X]
Sdf <* class="icon icon-fileformats" data-icon="s"> [icon-fileformats:s]
Tsv <* class="icon icon-fileformats" data-icon="v"> [icon-fileformats:v]
Txt <* class="icon icon-fileformats" data-icon="t"> [icon-fileformats:t]
Xml <* class="icon icon-fileformats" data-icon="x"> [icon-fileformats:x]
Zip <* class="icon icon-fileformats" data-icon="Z"> [icon-fileformats:Z]
EBI-Functional version 1.2 HTML Drupal
Add job <* class="icon icon-functional" data-icon=")"> [icon-functional:)]
Add user <* class="icon icon-functional" data-icon="7"> [icon-functional:7]
Add <* class="icon icon-functional" data-icon="+"> [icon-functional:+]
Align <* class="icon icon-functional" data-icon="i"> [icon-functional:i]
Analyse graph <* class="icon icon-functional" data-icon="z"> [icon-functional:z]
Analyse percent 0 <* class="icon icon-functional" data-icon="B"> [icon-functional:B]
Analyse percent 100 <* class="icon icon-functional" data-icon="E"> [icon-functional:E]
Analyse percent 40 <* class="icon icon-functional" data-icon="C"> [icon-functional:C]
Analyse <* class="icon icon-functional" data-icon="A"> [icon-functional:A]
Approve <* class="icon icon-functional" data-icon="/"> [icon-functional:/]
Approved job <* class="icon icon-functional" data-icon="("> [icon-functional:(]
Attach <* class="icon icon-functional" data-icon="a"> [icon-functional:a]
Browse <* class="icon icon-functional" data-icon="b"> [icon-functional:b]
Close <* class="icon icon-functional" data-icon="x"> [icon-functional:x]
Collapse closed <* class="icon icon-functional" data-icon="9"> [icon-functional:9]
Collapse open <* class="icon icon-functional" data-icon="8"> [icon-functional:8]
Collapse <* class="icon icon-functional" data-icon="w"> [icon-functional:w]
Compare <* class="icon icon-functional" data-icon="O"> [icon-functional:O]
Crop <* class="icon icon-functional" data-icon="\"> [icon-functional:\]
Cut <* class="icon icon-functional" data-icon="c"> [icon-functional:c]
Database submit <* class="icon icon-functional" data-icon="D"> [icon-functional:D]
Delete <* class="icon icon-functional" data-icon="d"> [icon-functional:d]
Download <* class="icon icon-functional" data-icon="="> [icon-functional:=]
Edit user <* class="icon icon-functional" data-icon="5"> [icon-functional:5]
Edit <* class="icon icon-functional" data-icon="e"> [icon-functional:e]
Expand <* class="icon icon-functional" data-icon="u"> [icon-functional:u]
Filter <* class="icon icon-functional" data-icon="f"> [icon-functional:f]
First page <* class="icon icon-functional" data-icon="["> [icon-functional:[]
Fullscreen <* class="icon icon-functional" data-icon="F"> [icon-functional:F]
Hierarchy <* class="icon icon-functional" data-icon="h"> [icon-functional:h]
Last page <* class="icon icon-functional" data-icon="]"> [icon-functional:]]
Like <* class="icon icon-functional" data-icon="k"> [icon-functional:k]
Lock <* class="icon icon-functional" data-icon="L"> [icon-functional:L]
Login <* class="icon icon-functional" data-icon="l"> [icon-functional:l]
Mapping <* class="icon icon-functional" data-icon="0"> [icon-functional:0]
Menu <* class="icon icon-functional" data-icon="M"> [icon-functional:M]
Move <* class="icon icon-functional" data-icon="m"> [icon-functional:m]
Next page <* class="icon icon-functional" data-icon=">"> [icon-functional:>]
Play <* class="icon icon-functional" data-icon="v"> [icon-functional:v]
Previous page <* class="icon icon-functional" data-icon="<"> [icon-functional:<]
Print <* class="icon icon-functional" data-icon="P"> [icon-functional:P]
Redo <* class="icon icon-functional" data-icon="}"> [icon-functional:}]
Refresh <* class="icon icon-functional" data-icon="R"> [icon-functional:R]
Remove user <* class="icon icon-functional" data-icon="6"> [icon-functional:6]
Remove <* class="icon icon-functional" data-icon="-"> [icon-functional:-]
Save <* class="icon icon-functional" data-icon="S"> [icon-functional:S]
Scaleable <* class="icon icon-functional" data-icon="Y"> [icon-functional:Y]
Search document <* class="icon icon-functional" data-icon="j"> [icon-functional:j]
Search <* class="icon icon-functional" data-icon="1"> [icon-functional:1]
Send <* class="icon icon-functional" data-icon="n"> [icon-functional:n]
Settings <* class="icon icon-functional" data-icon="s"> [icon-functional:s]
Share <* class="icon icon-functional" data-icon="r"> [icon-functional:r]
Stop <* class="icon icon-functional" data-icon="o"> [icon-functional:o]
Submit <* class="icon icon-functional" data-icon="_"> [icon-functional:_]
Target <* class="icon icon-functional" data-icon="T"> [icon-functional:T]
Tool <* class="icon icon-functional" data-icon="t"> [icon-functional:t]
Unassigned job <* class="icon icon-functional" data-icon="*"> [icon-functional:*]
Undo <* class="icon icon-functional" data-icon="{"> [icon-functional:{]
Unlock <* class="icon icon-functional" data-icon="U"> [icon-functional:U]
View <* class="icon icon-functional" data-icon="4"> [icon-functional:4]
Zoom in <* class="icon icon-functional" data-icon="3"> [icon-functional:3]
Zoom out <* class="icon icon-functional" data-icon="2"> [icon-functional:2]
EBI-Species version 1.2 HTML Drupal
Alpaca <* class="icon icon-species" data-icon="a"> [icon-species:a]
Amoeba <* class="icon icon-species" data-icon="0"> [icon-species:0]
Anolis <* class="icon icon-species" data-icon="7"> [icon-species:7]
Armadillo <* class="icon icon-species" data-icon="l"> [icon-species:l]
Aspergillus <* class="icon icon-species" data-icon="£"> [icon-species:£]
Barley <* class="icon icon-species" data-icon="5"> [icon-species:5]
Bat <* class="icon icon-species" data-icon="("> [icon-species:(]
Bee <* class="icon icon-species" data-icon="$"> [icon-species:$]
Brachypodium <* class="icon icon-species" data-icon="%"> [icon-species:%]
Brassica <* class="icon icon-species" data-icon="B"> [icon-species:B]
Bug <* class="icon icon-species" data-icon="b"> [icon-species:b]
C elegans <* class="icon icon-species" data-icon="W"> [icon-species:W]
Cat <* class="icon icon-species" data-icon="A"> [icon-species:A]
Chicken <* class="icon icon-species" data-icon="k"> [icon-species:k]
Chimpanzee <* class="icon icon-species" data-icon="i"> [icon-species:i]
Corn <* class="icon icon-species" data-icon="c"> [icon-species:c]
Cow <* class="icon icon-species" data-icon="C"> [icon-species:C]
Diatom <* class="icon icon-species" data-icon="2"> [icon-species:2]
Dog <* class="icon icon-species" data-icon="d"> [icon-species:d]
Dolphin <* class="icon icon-species" data-icon="D"> [icon-species:D]
Ecoli <* class="icon icon-species" data-icon="L"> [icon-species:L]
Elephant <* class="icon icon-species" data-icon="e"> [icon-species:e]
Ferret <* class="icon icon-species" data-icon="!"> [icon-species:!]
Finch <* class="icon icon-species" data-icon="n"> [icon-species:n]
Fly <* class="icon icon-species" data-icon="F"> [icon-species:F]
Frog <* class="icon icon-species" data-icon="f"> [icon-species:f]
Fungus <* class="icon icon-species" data-icon="u"> [icon-species:u]
Glycinemax <* class="icon icon-species" data-icon="^"> [icon-species:^]
Goat <* class="icon icon-species" data-icon="m"> [icon-species:m]
Gorilla <* class="icon icon-species" data-icon="G"> [icon-species:G]
Grapes <* class="icon icon-species" data-icon="O"> [icon-species:O]
Guinea pig <* class="icon icon-species" data-icon="g"> [icon-species:g]
Hedgehog <* class="icon icon-species" data-icon="o"> [icon-species:o]
Horse <* class="icon icon-species" data-icon="h"> [icon-species:h]
Human <* class="icon icon-species" data-icon="H"> [icon-species:H]
Kangaroo rat <* class="icon icon-species" data-icon="3"> [icon-species:3]
Louse <* class="icon icon-species" data-icon="4"> [icon-species:4]
Monkey <* class="icon icon-species" data-icon="r"> [icon-species:r]
Monodelphis <* class="icon icon-species" data-icon="9"> [icon-species:9]
Mosquito <* class="icon icon-species" data-icon="1"> [icon-species:1]
Mouse lemur <* class="icon icon-species" data-icon="N"> [icon-species:N]
Mouse <* class="icon icon-species" data-icon="M"> [icon-species:M]
Orangutan <* class="icon icon-species" data-icon="*"> [icon-species:*]
Papio <* class="icon icon-species" data-icon="8"> [icon-species:8]
Pig <* class="icon icon-species" data-icon="p"> [icon-species:p]
Plant <* class="icon icon-species" data-icon="P"> [icon-species:P]
Plasmodium <* class="icon icon-species" data-icon="@"> [icon-species:@]
Platypus <* class="icon icon-species" data-icon="U"> [icon-species:U]
Pufferfish <* class="icon icon-species" data-icon="E"> [icon-species:E]
Rabbit <* class="icon icon-species" data-icon="t"> [icon-species:t]
Rat <* class="icon icon-species" data-icon="R"> [icon-species:R]
Ray <* class="icon icon-species" data-icon="+"> [icon-species:+]
Rice <* class="icon icon-species" data-icon="6"> [icon-species:6]
Scorpion <* class="icon icon-species" data-icon="s"> [icon-species:s]
Sheep <* class="icon icon-species" data-icon="x"> [icon-species:x]
Shrew <* class="icon icon-species" data-icon="Q"> [icon-species:Q]
Snail <* class="icon icon-species" data-icon="'"> [icon-species:']
Spider <* class="icon icon-species" data-icon="S"> [icon-species:S]
Squirrel <* class="icon icon-species" data-icon="I"> [icon-species:I]
Tick <* class="icon icon-species" data-icon="&"> [icon-species:&]
Tomatoes <* class="icon icon-species" data-icon=")"> [icon-species:)]
Virus <* class="icon icon-species" data-icon="v"> [icon-species:v]
Wallaby <* class="icon icon-species" data-icon="w"> [icon-species:w]
Yeast <* class="icon icon-species" data-icon="Y"> [icon-species:Y]
Zebrafish <* class="icon icon-species" data-icon="Z"> [icon-species:Z]
EBI-SocialMedia version 1.2 HTML Drupal
Android <* class="icon icon-socialmedia" data-icon="a"> [icon-socialmedia:a]
Apple <* class="icon icon-socialmedia" data-icon="A"> [icon-socialmedia:A]
Blogger <* class="icon icon-socialmedia" data-icon="B"> [icon-socialmedia:B]
Facebook <* class="icon icon-socialmedia" data-icon="F"> [icon-socialmedia:F]
Flickr <* class="icon icon-socialmedia" data-icon="f"> [icon-socialmedia:f]
Github <* class="icon icon-socialmedia" data-icon="g"> [icon-socialmedia:g]
Googleplus <* class="icon icon-socialmedia" data-icon="G"> [icon-socialmedia:G]
Linkedin <* class="icon icon-socialmedia" data-icon="L"> [icon-socialmedia:L]
Linux <* class="icon icon-socialmedia" data-icon="X"> [icon-socialmedia:X]
Orcid <* class="icon icon-socialmedia" data-icon="O"> [icon-socialmedia:O]
Rss <* class="icon icon-socialmedia" data-icon="R"> [icon-socialmedia:R]
Skype <* class="icon icon-socialmedia" data-icon="s"> [icon-socialmedia:s]
Slideshare <* class="icon icon-socialmedia" data-icon="S"> [icon-socialmedia:S]
Twitter <* class="icon icon-socialmedia" data-icon="T"> [icon-socialmedia:T]
Vimeo <* class="icon icon-socialmedia" data-icon="V"> [icon-socialmedia:V]
Weibo <* class="icon icon-socialmedia" data-icon="W"> [icon-socialmedia:W]
Windows <* class="icon icon-socialmedia" data-icon="w"> [icon-socialmedia:w]
Wordpress <* class="icon icon-socialmedia" data-icon="P"> [icon-socialmedia:P]
Youtube <* class="icon icon-socialmedia" data-icon="Y"> [icon-socialmedia:Y]
See the Code