# 🧩 DSRCT Wiki Icon Reference Sheet
All icons below come from `/assets/sprite.svg`.
Each entry shows the live icon, its ID, and a ready-to-copy snippet for use in notes.
> [!info] Usage
> Copy the `<a><svg><use></use></svg></a>` snippet under each label and paste it into your Markdown or callouts.
> Adjust the `href` to the correct topic (e.g., `/hallmarks/deregulating-cellular-metabolism`).
---
| Icon | Label | Symbol ID | Copy-ready snippet |
| ------------------------------------------------------------------------------ | --------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-metabolism"/></svg> | **Cellular Metabolism** | `icon-metabolism` | `<a class="icon-link" href="/hallmarks/deregulating-cellular-metabolism"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-metabolism"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-signalling"/></svg> | **Cell Signalling** | `icon-signalling` | `<a class="icon-link" href="/topics/cell-signalling"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-signalling"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-pathway"/></svg> | **Molecular Pathway** | `icon-pathway` | `<a class="icon-link" href="/topics/molecular-pathway"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-pathway"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-gene"/></svg> | **Gene** | `icon-gene` | `<a class="icon-link" href="/topics/gene"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-gene"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-protein"/></svg> | **Protein** | `icon-protein` | `<a class="icon-link" href="/topics/protein"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-protein"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-dna"/></svg> | **DNA** | `icon-dna` | `<a class="icon-link" href="/topics/dna"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-dna"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-receptor"/></svg> | **Cell Surface Receptor** | `icon-receptor` | `<a class="icon-link" href="/topics/cell-surface-receptor"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-receptor"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-epigenetic"/></svg> | **Epigenetic Regulation** | `icon-epigenetic` | `<a class="icon-link" href="/topics/epigenetic-regulation"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-epigenetic"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-resistance"/></svg> | **Resistance Mechanism** | `icon-resistance` | `<a class="icon-link" href="/topics/resistance-mechanism"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-resistance"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-plasticity"/></svg> | **Phenotypic Plasticity** | `icon-plasticity` | `<a class="icon-link" href="/topics/phenotypic-plasticity"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-plasticity"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-immortality"/></svg> | **Replicative Immortality** | `icon-immortality` | `<a class="icon-link" href="/topics/replicative-immortality"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-immortality"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-study"/></svg> | **Study** | `icon-study` | `<a class="icon-link" href="/topics/study"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-study"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-vitro"/></svg> | **Evidence: In-Vitro** | `icon-vitro` | `<a class="icon-link" href="/evidence/in-vitro"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-vitro"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-vivo"/></svg> | **Evidence: In-Vivo** | `icon-vivo` | `<a class="icon-link" href="/evidence/in-vivo"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-vivo"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-pdx"/></svg> | **Evidence: Patient Derived Xenograft** | `icon-pdx` | `<a class="icon-link" href="/evidence/pdx"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-pdx"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-clinical"/></svg> | **Evidence: Clinical** | `icon-clinical` | `<a class="icon-link" href="/evidence/clinical"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-clinical"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-suppressor"/></svg> | **Tumor Suppressor** | `icon-suppressor` | `<a class="icon-link" href="/topics/tumor-suppressor"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-suppressor"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-dna-binding"/></svg> | **DNA-Binding Protein** | `icon-dna-binding` | `<a class="icon-link" href="/topics/dna-binding-protein"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-dna-binding"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-theory"/></svg> | **Theory** | `icon-theory` | `<a class="icon-link" href="/topics/theory"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-theory"/></svg></a>` |
| <svg class="wiki-icon"><use href="/assets/sprite.svg#icon-dsrct"/></svg> | **DSRCT Target** | `icon-dsrct` | `<a class="icon-link" href="/topics/dsrct-target"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-dsrct"/></svg></a>` |
---
> [!tip] Pro tips
> - You can recolor icons inline with `style="color:#9A2EFE"`, e.g.
> `<svg class="wiki-icon" style="color:#9A2EFE"><use href="/assets/sprite.svg#icon-epigenetic"/></svg>`
> - For smaller inline uses, define a `.icon-sm` class in CSS (e.g. `width:1.25em; height:1.25em;`).
> - All icons are vector, so they remain perfectly sharp at any scale or zoom.
---
âś… **Next steps:**
- Save this as `_Reference/Icon Library.md`
- Open it in preview mode to see all icons rendered.
- Copy and paste snippets whenever you’re writing a new topic page.
<a class="icon-link" href="/hallmarks/deregulating-cellular-metabolism"><svg class="wiki-icon"><use href="/assets/sprite.svg#icon-metabolism"/></svg></a>
## Positioning Patterns:
**Inline with text (auto color from text)**
```html
<svg class="wiki-icon" style="color:#0B72B9" viewBox="0 0 24 24" aria-hidden="true">…</svg>
```
**Float an icon to start a section**
```html
<svg class="wiki-icon icon-left icon-lg" viewBox="0 0 24 24" aria-hidden="true">…</svg>
<p>Intro paragraph wraps around the icon…</p>
```
**Center a big icon “sticker”**
```html
<svg class="wiki-icon icon-center" style="width:64px;height:64px" viewBox="0 0 24 24" aria-hidden="true">…</svg>
```
Test
<svg class="wiki-icon" role="img" aria-label="Genome instability">
<use href="/assets/sprite.svg#icon-genome"></use>
</svg>
<a class="icon-link" href="/hallmarks/dergulated-cellular-metabolism" aria-label="Cellular Metabolism">
<svg class="wiki-icon" role="img">
<use href="/assets/sprite.svg#icon-metabolism"></use>
</svg>
</a>
## New Test
Ssjdsdkj
<a class="icon-link" href="/hallmarks/dergulated-cellular-metabolism" aria-label="Cellular Metabolism">
<svg class="wiki-icon" role="img">
<use href="/assets/sprite.svg#icon-metabolism"></use>
</svg>
</a>