Skip to content

Latest commit

 

History

History
210 lines (143 loc) · 10.4 KB

icons.md

File metadata and controls

210 lines (143 loc) · 10.4 KB
Raw

Icons

Both sections and items can have an icon, which is specified using the icon attribute. Using icons improves the aesthetics of your UI and makes the app more intuitive to use. Dashy supports multiple different icon providers, usage instructions for which are explained here.

Favicons

Dashy can auto-fetch an icon for a given service, using it's favicon. Just set icon: favicon to use this feature.

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, 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 following favicon APIs are supported:

  • allesedv - allesedv.com is a highly efficient IPv6-enabled service
  • iconhorse - Icon.Horse returns quality icons for any site, with caching for speed and fallbacks for sites without an icon
  • clearbit - Clearbit returns high-quality square logos from mainstream websites
  • faviconkit - faviconkit.com good quality icons and most sites supported (Note: down as of Nov '21)
  • besticon - BestIcon fetches websites icons from manifest
  • mcapi - MC-API 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
  • 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.

Font Awesome

You can use any Font Awesome Icon simply by specifying it's identifier. This is in the format of [category] [name] and can be found on the page for that icon on the Font Awesome site. For example: fas fa-rocket, fab fa-monero or fas fa-unicorn.

Font-Awesome has a wide variety of free icons, but you can also use their pro icons if you have a membership. To do so, you need to specify your license key under: appConfig.fontAwesomeKey. This is usually a 10-digit string, for example 13014ae648.

Simple Icons

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, then just set your icon the the simple icon slug, prefixed with si-.

For example:

sections:
- name: Simple Icons Example
  items:
  - title: Portainer
    icon: si-portainer
  - title: FreeNAS
    icon: si-freenas
  - title: NextCloud
    icon: si-nextcloud
  - title: Home Assistant
    icon: si-homeassistant

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 (or Evatar for fallback), and use a hash of the services domain/ ip for entropy, so each domain will have a unique icon.

Emoji Icons

You can use almost any emoji as an icon for items or sections. You can specify the emoji either by pasting it directly, using it's unicode ( e.g. 'U+1F680') or shortcode (e.g. ':rocket:'). You can find these codes for any emoji using Emojipedia (near the bottom of emoji each page), or for a quick reference to emoji shortcodes, check out emojis.ninja by @nomanoff.

For example, these will all render the same rocket (🚀) emoji: icon: ':rocket:' or icon: 'U+1F680' or icon: 🚀

Home-Lab Icons

The dashboard-icons repo by @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 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 method may be a better option for you.

For example:

sections:
- name: Home Lab Icons Example
  items:
  - title: AdGuard Home
    icon: hl-adguardhome
  - title: Long Horn
    icon: hl-longhorn
  - title: Nagios
    icon: hl-nagios
  - title: Whoogle Search
    icon: hl-whooglesearch

Material Design Icons

Dashy also supports 5000+ material-design-icons. To use these, first find the name/ slug for your icon here, and then prefix is with mdi-.

For example:

sections:
- name: Material Design Icons Example
  items:
  - title: Alien Icon
    icon: mdi-alien
  - title: Fire Icon
    icon: mdi-fire
  - title: Dino Icon
    icon: mdi-google-downasaur

Icons by URL

You can also set an icon by passing in a valid URL pointing to the icons location. For example icon: https://i.ibb.co/710B3Yc/space-invader-x256.png, this can be in .png, .jpg or .svg format, and hosted anywhere (local or remote) - so long as it's accessible from where you are hosting Dashy. The icon will be automatically scaled to fit, however loading in a lot of large icons may have a negative impact on performance, especially if you visit Dashy from new devices often.

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 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

Default Icon

If you'd like to set a default icon, to be applied to any items which don't have an icon already set, then this can be done under appConfig.defaultIcon.

No Icon

If you don't wish for a given item or section to have an icon, just leave out the icon attribute.

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.

If you are a student, then you can get free access to premium icons on Icon Scout or Icons8 using the GitHub Student Pack.

Notes

If you are using icons from an external source, these will be fetched on initial page load automatically, if and when needed. But combining icons from multiple services may have a negative impact on performance.

You can improve load speeds, by downloading your required icons, and serving them locally. Scaling icons to the minimum required dimensions (e.g. 128x128 or 64x64) will also greatly improve application load times.

For icons from external sources, please see the Privacy Policies and Licenses for that provider.