Nutritious Pancake Mountain

    This package has been deprecated

    Author message:

    Permanently moved to @ebi-gene-expression-group/react-ebi-species


    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






    Unpacked Size

    17.9 kB

    Total Files


    Last publish


    • gxa
    • wbazant