# scienceicons

> Open science icons, by Continuous Science Foundation

Latest version **0.0.14** (published 2026-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install scienceicons
pnpm add scienceicons
yarn add scienceicons
bun add scienceicons
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2026-04-28 |
| First published | 2023-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rowanc1, stevejpurves |
| Keywords | icons, open-science |

## Links

- npm: https://www.npmjs.com/package/scienceicons
- npm.io page: https://npm.io/package/scienceicons

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.0.14 (latest) — 2026-04-28
- 0.0.13 — 2025-04-25
- 0.0.12 — 2025-02-06
- 0.0.8 — 2024-06-27
- 0.0.7 — 2024-06-25
- 0.0.6 — 2023-10-02
- 0.0.5 — 2023-08-04
- 0.0.4 — 2023-08-04
- 0.0.3 — 2023-07-14
- 0.0.2 — 2023-03-22
- 0.0.1 — 2023-01-07

## README

<p align="center">
  Open science SVG icons, by Continuous Science Foundation. <br>Available as basic SVG icons and via first-party <a href="#react">React</a> and <a href="#vue">Vue</a> libraries.
<p>

<p align="center">
  <a href="https://github.com/continuous-foundation/scienceicons"><strong>Browse scienceicons &rarr;</strong></a>
</p>

<p align="center">
    <a href="https://github.com/continuous-foundation/scienceicons/releases"><img src="https://img.shields.io/npm/v/scienceicons" alt="Latest Release"></a>
    <a href="https://github.com/continuous-foundation/scienceicons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/scienceicons.svg" alt="License"></a>
</p>

## React

First, install `@scienceicons/react` from npm:

```sh
npm install @scienceicons/react
```

Now each icon can be imported individually as a React component:

```js
import { OpenAccessIcon } from '@scienceicons/react/24/solid';

function MyComponent() {
  return (
    <div>
      <OpenAccessIcon className="h-6 w-6 text-blue-500" />
      <p>...</p>
    </div>
  );
}
```

The 24x24 outline icons can be imported from `@scienceicons/react/24/outline`, the 24x24 solid icons can be imported from `@scienceicons/react/24/solid`, and the 20x20 solid icons can be imported from `@scienceicons/react/20/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@scienceicons/react/24/solid/)

## Vue

_Note that this library currently only supports Vue 3._

First, install `@scienceicons/vue` from npm:

```sh
npm install @scienceicons/vue
```

Now each icon can be imported individually as a Vue component:

```vue
<template>
  <div>
    <OpenAccessIcon class="w-6 h-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script>
import { OpenAccessIcon } from '@scienceicons/vue/24/solid';

export default {
  components: { OpenAccessIcon },
};
</script>
```

The 24x24 outline icons can be imported from `@scienceicons/vue/24/outline`, the 24x24 solid icons can be imported from `@scienceicons/vue/24/solid`, and the 20x20 solid icons can be imported from `@scienceicons/vue/20/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@scienceicons/vue/24/solid/)

# Typst

```typst
#import "@preview/scienceicons:0.1.0": open-access-icon

This article is Open Access #open-access-icon(color: orange, height: 1.1em, baseline: 20%)
```

![](https://github.com/continuous-foundation/scienceicons/blob/main/typst/docs/example.png?raw=true)

All icons:

![](https://github.com/continuous-foundation/scienceicons/blob/main/typst/docs/icons.png?raw=true)

[See more](https://typst.app/universe/package/scienceicons/)

# MyST Markdown

A MyST Markdown role for science icons and an accompanying react based renderer

## Installation

Copy the file `scienceicons.mjs` from `dist/` intoyour local `mystmd` project and add it to the list of plugins in `myst.yml`:

```yaml
project:
  plugins:
    - scienceicons.mjs
```

## Using the Role

To use the role simply add it to your MyST markdown like so:

```markdown
Praesent mattis viverra lacus, {scienceicon}`twitter` at cursus eros hendrerit nec {scienceicon}`curvenote`.
```

And the relevant icons will appear inline in your text. Use the icons in links by:

```markdown
... metus ut consequat [{scienceicon}`twitter`](https://x.com/@curvenote) dignissim ante sem ...
```

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@scienceicons/myst@latest/src/names.json)

> [!TIP]
> MyST Markdown's plugin loading system is still developing, [look out for updates](https://mystmd.org/guide/plugins) on easier ways to access and load plugins.

## Using the renderer

Methods for installing a bundled renderer are still in development by the MyST Markdown project and Curvenote. In the meantime you can install this package from git (`git+https://github.com/<org>/<repo>.git#<branch>`) and include in your build.

## License

This library is primarily based on [heroicons](https://www.npmjs.com/package/heroicons), see [MIT license](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE). For other cases, license and attribution information can be found in comments within individual `.svg` files.

## License

This library is MIT licensed.

---
_Source: https://npm.io/package/scienceicons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._