Smartcraft-Media-Tech/icons
1
0
Fork 0
mirror of https://github.com/selfhst/icons.git synced 2026-04-30 13:26:18 -04:00
Code Issues Packages Projects Releases Wiki Activity

Initiate automated workflow

Browse Source
This commit is contained in:
selfhst-bot
2025-08-09 14:44:04 -04:00
parent d6d3d239b4
commit 43a7ed5b97
6 changed files with 106 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
README.md
View File

@@ -1,107 +1,18 @@
<div align="center">
<img width="400" src="https://cdn.jsdelivr.net/gh/selfhst/cdn/assets/site/logos/selfh-st-icons.svg" alt="selfh.st/icons Logo">
</div>
<br/>
<p align="center">
<a href="https://selfh.st/support/#/portal/support">
<img src="https://img.shields.io/badge/Stripe-5469d4?style=for-the-badge&logo=stripe&logoColor=ffffff" alt="Stripe"/></a>
<a href="https://ko-fi.com/selfhst">
<img src="https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white" alt="Ko-fi"/></a>
<a href="https://patreon.com/selfhst">
<img src="https://img.shields.io/badge/Patreon-000000?style=for-the-badge&logo=patreon&logoColor=white" alt="Patreon"/></a>
<a href="https://buymeacoffee.com/selfhst">
<img src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" alt="Buy Me a Coffee"/></a>
</p>
<br/>
<div align="center">
<img width="800" style="border-radius: 8px;" src="https://cdn.jsdelivr.net/gh/selfhst/cdn/assets/site/screenshots/selfh-st-icons.png" alt="selfh.st/icons Screenshot">
</div>
<br/>
[selfh.st/icons](https://selfh.st/icons) is a collection of 4,500+ logos and icons for self-hosted (and non-self-hosted) software.
[selfh.st/icons](https://selfh.st/icons) is a collection of logos and icons for self-hosted (and non-self-hosted) software.
The collection is available for browsing via the directory at [selfh.st/icons](https://selfh.st/icons) and served to users directly from this repo using the jsDelivr content delivery network.
To self-host the collection, users can clone, download, or sync the repository with a tool such as [git-sync](https://github.com/AkashRajpurohit/git-sync) and serve it via a web server of their choosing (Caddy, NGINX, etc.).
To self-host the collection, users should refer to the [repository's wiki](https://github.com/selfhst/icons/wiki).
## Color Options
#### Custom Colors
By default, most SVG icons are available in three color formats:
By default, the directory provides SVG icons (when available) in standard, dark, and light colors. Users looking to display the icons using colors of their choice can become a [paid member of selfh.st](https://selfh.st/perks) or [deploy the collection themselves](https://github.com/selfhst/icons/wiki).
* **Standard**: The standard colors of an icon without any modifications.
* **Dark**: A modified version of an icon displayed entirely in black (```#000000```).
* **Light**: A modified version of an icon displayed entirely in white (```#FFFFFF```).
#### Requests
(Toggles to view icons by color type are available in the [directory hosted on the selfh.st website](https://selfh.st/icons).)
## Custom Colors
Because the dark and light versions of each icon are monochromatic, CSS can theoretically be leveraged to apply custom colors to the icons.
This only works, however, when the SVG code is embedded directly onto a webpage. Unfortunately, most [integrations](https://selfh.st/apps/?tag=selfh-st-icons) link to the icons via an `<img>` tag, which prevents styling from being overridden via CSS.
As a workaround, a lightweight self-hosted server has been published via Docker that utilizes a URL parameter for color conversion on the fly. Continue reading for further instructions.
### Deploying the Custom Color Container
* [Introduction](https://github.com/selfhst/icons#introduction)
* [Deploying the container](https://github.com/selfhst/icons#deployment)
* [Configuring a reverse proxy (optional)](https://github.com/selfhst/icons#reverse-proxy)
* [Linking to a custom icon](https://github.com/selfhst/icons#linking)
* [Changelog](https://github.com/selfhst/icons#changelog)
#### Introduction
The Docker image below allows users to host a local server that acts as a proxy between requests and jsDelivr. When a color parameter is detected in the URL, the server will intercept the requests, fill the SVG file with that color, and serve it to the user.
Once deployed, users can append ```?color=eeeeee``` to the end of a URL to specify a custom color (replacing ```eeeeee``` with any [hex color code](https://htmlcolorcodes.com/)).
#### Deployment
The container can be easily deployed via docker-compose with the following snippet:
```
selfhst-icons:
image: ghcr.io/selfhst/icons:latest
restart: unless-stopped
ports:
- 4050:4050
```
No volume mounts or environment variables are currently required.
#### Reverse Proxy
While out of the scope of this guide, many applications will require users to leverage HTTPS when linking to icons served from the container.
The process to proxy the container and icons is straightforward. A sample Caddyfile configuration has been provided for reference:
```
icons.selfh.st {
reverse_proxy selfhst-icons:4050
}
```
#### Linking
After the container has been deployed, users can easily link to any existing icon within the collection:
* ```https://icons.selfh.st/bookstack.svg```
* ```https://icons.selfh.st/bookstack.png```
* ```https://icons.selfh.st/bookstack-dark.webp```
To customize the color, users **must** link to the *standard* version of an SVG icon that has available monochromatic (dark/light) versions. To do so, append a custom URL parameter referencing any [hex color code](https://htmlcolorcodes.com/):
* ```https://icons.selfh.st/bookstack.svg?color=eeeeee```
* ```https://icons.selfh.st/bookstack.svg?color=439b68```
**Note the following:**
* Only the standard icons accept URL parameters (for example, ```bookstack-light.svg?color=fff000``` will not yield a different color.
* Only append the alpha-numeric portion of the hex color code to the URL. The server will append the ```#``` in the backend before passing it on for styling.
##### Changelog
* 2025-04-30: Initial release
Requests for new or updated icons can be made via the repository's [discussions](https://github.com/selfhst/icons/discussions). To ensure quality and consistency, pull requests will not be accepted from unapproved members.