This commit is contained in:
parent
f25d1f1a05
commit
eb954e7470
307 changed files with 24443 additions and 14699 deletions
|
|
@ -7,6 +7,7 @@ Both sections and items can have an icon, which is specified using the `icon` at
|
|||
- [Simple Icons](#simple-icons)
|
||||
- [Generative Icons](#generative-icons)
|
||||
- [Emoji Icons](#emoji-icons)
|
||||
- [selfh.st Icons](#selfhst-icons)
|
||||
- [Home-Lab Icons](#home-lab-icons)
|
||||
- [Material Icons](#material-design-icons)
|
||||
- [Icons by URL](#icons-by-url)
|
||||
|
|
@ -14,6 +15,7 @@ Both sections and items can have an icon, which is specified using the `icon` at
|
|||
- [Using a Default Icon](#default-icon)
|
||||
- [No Icon](#no-icon)
|
||||
|
||||
|
||||
<p align="center">
|
||||
<img width="500" src="https://i.ibb.co/GTVmZnc/dashy-example-icons.png" />
|
||||
</p>
|
||||
|
|
@ -30,19 +32,19 @@ Dashy can auto-fetch an icon for a given service, using it's favicon. Just set `
|
|||
|
||||
Since different websites host their favicons at different paths, for the best results Dashy can use an API to resolve a websites icon.
|
||||
|
||||
The default favicon API is [allesedv.com](https://favicon.allesedv.com/), but you can change this under `appConfig.faviconApi`. If you'd prefer not to use an API, just set this value to `local`. You can also use different APIs for individual items, by setting `icon: favicon-[api]`, e.g. `favicon-clearbit`.
|
||||
The default favicon API is [allesedv.com](https://favicon.allesedv.com/), but you can change this under `appConfig.faviconApi`. If you'd prefer not to use an API, just set this value to `local`. You can also use different APIs for individual items, by setting `icon: favicon-[api]`, e.g. `favicon-iconhorse`.
|
||||
|
||||
The following favicon APIs are supported:
|
||||
|
||||
- `allesedv` - [allesedv.com](https://favicon.allesedv.com/) is a highly efficient IPv6-enabled service
|
||||
- `iconhorse` - [Icon.Horse](https://icon.horse/) returns quality icons for any site, with caching for speed and fallbacks for sites without an icon
|
||||
- `clearbit` - [Clearbit](https://clearbit.com/logo) returns high-quality square logos from mainstream websites
|
||||
- `faviconkit` - [faviconkit.com](https://faviconkit.com/) good quality icons and most sites supported (Note: down as of Nov '21)
|
||||
- `besticon` - [BestIcon](https://github.com/mat/besticon) fetches websites icons from manifest
|
||||
- `mcapi` - [MC-API](https://eu.mc-api.net/) fetches default website favicon, originally a Minecraft util
|
||||
- `duckduckgo` - Returns decent quality website icons, from DuckDuckGo search
|
||||
- `google` - Official Google favicon API service, good support for all sites, but poor quality
|
||||
- `yandex` - Lower quality icons, but useful in some regions where other services are blocked
|
||||
- `webmasterapi` - [WebMasterAPI](https://www.webmasterapi.com/) fetches website favicons via their API
|
||||
- `local` - Set to local to fetch the default icon at /favicon.ico instead of using an API
|
||||
|
||||
If for a given service none of the APIs work in your situation, and nor does local, then the best option is to find the path of the services logo or favicon, and set the icon to the URL of the raw image. For example, `icon: https://monitoring.local/faviconx128.png`- you can find this path using the browser dev tools.
|
||||
|
|
@ -63,7 +65,7 @@ Font-Awesome has a wide variety of free icons, but you can also use their pro ic
|
|||
|
||||
## Simple Icons
|
||||
|
||||
[SimpleIcons.org](https://simpleicons.org/) is a collection of 2000+ high quality, free and open source brand and logo SVG icons. Usage of which is very similar to font-awesome icons. First find the glyph you want to use on the [website](https://simpleicons.org/), then just set your icon the the simple icon slug, prefixed with `si-`.
|
||||
[SimpleIcons.org](https://simpleicons.org/) is a collection of 2000+ high quality, free and open source brand and logo SVG icons. Usage of which is very similar to font-awesome icons. First find the glyph you want to use on the [website](https://simpleicons.org/), then just set your icon to the simple icon slug, prefixed with `si-`.
|
||||
|
||||
<p align="center">
|
||||
<img width="580" src="https://i.ibb.co/MVhkXfC/simple-icons-example.png" />
|
||||
|
|
@ -89,7 +91,7 @@ sections:
|
|||
|
||||
## Generative Icons
|
||||
|
||||
To uses a unique and programmatically generated icon for a given service just set `icon: generative`. This is particularly useful when you have a lot of similar services with a different IP or port, and no specific icon. These icons are generated with [DiceBear](https://avatars.dicebear.com/) (or [Evatar](https://evatar.io/) for fallback), and use a hash of the services domain/ ip for entropy, so each domain will have a unique icon.
|
||||
To uses a unique and programmatically generated icon for a given service just set `icon: generative`. This is particularly useful when you have a lot of similar services with a different IP or port, and no specific icon. These icons are generated with [DiceBear](https://api.dicebear.com/) (or [Evatar](https://evatar.io/) for fallback), and use a hash of the services domain/ ip for entropy, so each domain will have a unique icon.
|
||||
|
||||
<p align="center">
|
||||
<img width="500" src="https://i.ibb.co/b2pC2CL/generative-icons-2.png" />
|
||||
|
|
@ -109,9 +111,21 @@ For example, these will all render the same rocket (🚀) emoji: `icon: ':rocket
|
|||
|
||||
---
|
||||
|
||||
## selfh.st Icons
|
||||
|
||||
The [selfh.st](https://selfh.st/) project provides a set of icons, originally for self-hosted services, but now expanded to include a wide variety of services. These icons can be used by specifying the icon name (without extension and with all spaces replaced with -) preceded by `sh-`. See https://selfh.st/icons/ for a full list of all available icons. For example, the Home Assistant icon is `sh-home-assistant`.
|
||||
|
||||
Note: These icons are fetched from the jsdelivr CDN, so if you require offline access, the [Local Icons](#local-icons) method may be a better option for you.
|
||||
|
||||
<p align="center">
|
||||
<img width="580" src="https://i.ibb.co/pfy09LH/Screenshot-from-2025-01-08-22-04-21.png" />
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
## Home-Lab Icons
|
||||
|
||||
The [dashboard-icons](https://github.com/walkxcode/Dashboard-Icons) repo by [@WalkxCode](https://github.com/WalkxCode) provides a comprehensive collection of 360+ high-quality PNG icons for commonly self-hosted services. Dashy natively supports these icons, and you can use them just by specifying the icon name (without extension) preceded by `hl-`. See [here](https://github.com/walkxcode/Dashboard-Icons/tree/main/png) for a full list of all available icons. Note that these are fetched and cached strait from GitHub, so if you require offline access, the [Local Icons](#local-icons) method may be a better option for you.
|
||||
The [dashboard-icons](https://github.com/homarr-labs/dashboard-icons) repo by [Homarr Labs](https://github.com/homarr-labs) provides a comprehensive collection of high-quality icons for commonly self-hosted services. Dashy natively supports these icons, and you can use them just by specifying the icon name (without extension) preceded by `hl-`. SVG is preferred where available, with an automatic fallback to PNG for icons that aren't published as SVG. See [here](https://github.com/homarr-labs/dashboard-icons/tree/main/svg) for a full list of all available icons. Note that these are fetched and cached straight from jsDelivr, so if you require offline access, the [Local Icons](#local-icons) method may be a better option for you.
|
||||
|
||||
For example:
|
||||
|
||||
|
|
@ -167,7 +181,7 @@ You can also set an icon by passing in a valid URL pointing to the icons locatio
|
|||
|
||||
## Local Icons
|
||||
|
||||
You may also want to store your icons locally, bundled within Dashy so that there is no reliance on outside services. This can be done by putting the icons within Dashy's `./public/item-icons/` directory. If you are using Docker, then the easiest option is to map a volume from your host system, for example: `-v /local/image/directory:/app/public/item-icons/`. To reference an icon stored locally, just specify it's name and extension. For example, if my icon was stored in `/app/public/item-icons/maltrail.png`, then I would just set `icon: maltrail.png`.
|
||||
You may also want to store your icons locally, bundled within Dashy so that there is no reliance on outside services. This can be done by putting the icons within Dashy's `./user-data/item-icons/` directory. If you are using Docker, then the easiest option is to map a volume from your host system, for example: `-v /local/image/directory:/app/user-data/item-icons/`. To reference an icon stored locally, just specify it's name and extension. For example, if my icon was stored in `/app/user-data/item-icons/maltrail.png`, then I would just set `icon: maltrail.png`.
|
||||
|
||||
You can also use sub-folders within the `item-icons` directory to keep things organized. You would then specify an icon with it's folder name slash image name. For example: `networking/monit.png`
|
||||
|
||||
|
|
@ -187,7 +201,7 @@ If you don't wish for a given item or section to have an icon, just leave out th
|
|||
|
||||
## Icon Collections and Resources
|
||||
|
||||
The following websites provide good-quality, free icon sets. To use any of these icons, either copy the link to the raw icon (it should end in `.svg` or `.png`) and paste it as your `icon`, or download and save the icons in `/public/item-icons` / mapped Docker volume. Full credit to the authors, please see the licenses for each service for usage and copyright information.
|
||||
The following websites provide good-quality, free icon sets. To use any of these icons, either copy the link to the raw icon (it should end in `.svg` or `.png`) and paste it as your `icon`, or download and save the icons in `/user-data/item-icons` / mapped Docker volume. Full credit to the authors, please see the licenses for each service for usage and copyright information.
|
||||
|
||||
- [Icons for Self-Hosted Apps](https://thehomelab.wiki/books/helpful-tools-resources/page/icons-for-self-hosted-dashboards) - 350+ high-quality icons for commonly self-hosted services
|
||||
- [SVG Box](https://svgbox.net/iconsets/) - Cryptocurrency, social media apps and flag icons
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue