---
date: 2024-12-28
title: rss.svg
subtitle: how to make that funny little subscribe icon.
tags:
  - my-blog
  - programming
permalink: /blog/21/
---
Today I added the [RSS](https://en.wikipedia.org/wiki/RSS) icon ( <svg width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg> ) to my site! You should be able to see it up top by the word "blog" in the navbar, and if you click on it, it pulls up the RSS feed that you can subscribe to! As an aside, my current preferred reader is [FreshRSS](https://www.freshRSS.org/), but the nice thing about RSS readers is that they all have a standard import/export format so you can switch whenever you want :)

Anyway, I did this in a couple of steps. First I went searching for existing art that I can freely use, and I found [this one on SVG Repo](https://www.svgrepo.com/svg/95552/rss-sign) with a [CC0 License](https://creativecommons.org/public-domain/cc0/). Thanks, SVG Repo!

I modified the SVG to use `fill="currentColor"`, and I import it like this:

```html
<svg width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
```

Since the fill color is set based on the font color, it'll always match my theme! Here's a bunch of different colored RSS icons for fun.

<svg color="var(--xkcd-magenta)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-red)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-orange)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-yellow)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-green)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-teal)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-blue)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-purple)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>

<svg color="var(--xkcd-pink)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-lightblue)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-white)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-lightblue)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-pink)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-white)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-pink)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-lightblue)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>

<svg color="var(--xkcd-yellow)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-yellow)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-white)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-white)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-purple)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-purple)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-dark-grey)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
<svg color="var(--xkcd-dark-grey)" width="0.8em" height="0.8em"><use href='/a/rss.svg#img'></svg>
