Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »


2.2.1 • Public • Published

EBI species icons for React

Build Status Coverage Status

A React component to render organisms icons from the EBI-Species font declaratively. Demo of all supported species.

How to use

The component comes in two flavours:

  • Using classes .icon .icon-species declared in fonts.css from the EBI Visual Framework
  • A bare-bones component that you can use in any web application without depending on the EBI VF styles being loaded in your environment

The first one has the advantage that if the global CSS is changed, the component will then pick up the new styles. The second variant doesn’t need any dependency and can be used anywhere and it will just work. Notice that the second version still uses classes, but they will be uniquely scoped to the component


To install:

npm install --save react-ebi-species

To use as a React component:

import EbiSpeciesIcon from 'react-ebi-species'
<EbiSpeciesIcon species={`homo sapiens`}/>

Alternatively, to use the “no class” flavour:

import { EbiSpeciesIconBare as EbiSpeciesIcon } from 'react-ebi-species'
<EbiSpeciesIcon species={`homo sapiens`}/>

To use as a renderer and attach the icons to DOM elements:

import { render } from 'react-ebi-species'
render({ species: 'homo sapiens' }, 'id-of-your-DOM-element')


import { renderBare as render } from 'react-ebi-species'
render({ species: 'homo sapiens' }, 'id-of-your-DOM-element')

To use directly in your browser (see the source of the demo pages):

<script src="dist/vendors.bundle.js"></script>
<script src="dist/ebiSpeciesIcon.bundle.js"></script>
<script src="dist/ebiSpeciesIconBare.bundle.js"></script>

    ebiSpeciesIcon.render({ species: 'homo sapiens' }, 'id-of-your-DOM-element')
    ebiSpeciesIcon.renderBare({ species: 'homo sapiens' }, 'id-of-your-DOM-element')


The species prop should be a scientific name, although the names given in the EBI-Species documentation and other variants are available. It is case insensitive. Have a look at the demo page for details.

Prop Type Default value Use case
species string 🐰 oryctolagus cuniculus 🐰 The name of the species to be rendered
groupColors object { warmBlooded: `indianred`, plants: `mediumseagreen`, other: `deepskyblue` } Colours for groups of organisms
color string An optional colour that overrides groupColours


Pull requests to enlarge the mapping of species to icons, or with alternative names of species, are very welcome! Extend the mapping as required, then test locally through

npx webpack-dev-server --mode=development

Go to localhost:9000 and see that the new icon appears there.

It is also a good idea to verify that all tests pass:

npm run testOnly

Commit and PR away.

It would be fairly easy to cut the React dependency out of this package if you just need the mapping - if you fork then we can share the species to icon mapping.


Made in the EBI for Expression Atlas.


npm i react-ebi-species

Downloadsweekly downloads









last publish


  • avatar
  • avatar
Report a vulnerability