📌 Jellyfin Icon Metadata

🔥 Description

Enhance your Jellyfin experience by replacing text-based metadata provider links with icons. This plugin supports various metadata providers across different media types.

Supported Providers

Movies/TV Shows/Anime/Music

• anilist.co
• anidb.net
• anisearch.com
• bgm.tv
• hikka.io
• movie.douban.com
• imdb.com
• kitsu.app
• myanimelist.net
• shikimori.one
• Shoko (local metadata provider)
• Stash (local metadata provider)
• themoviedb.org
• themoviedb.org/collection
• theporndb.net
• thetvdb.com
• trakt.tv
• simkl.com
• tvmaze.com
• kinopoisk.ru
• tvlistings.zap2it.com

Books/Comics/Manga

• comicvine.gamespot.com
• books.google.com
• search.worldcat.org
• hikka.io

Music

• music.apple.com
• discogs.com
• musicbrainz.org
• theaudiodb.com
• vgmdb.net
• imvdb.com

Adding New Metadata Providers

To add a new metadata provider, simply provide a link to the plugin that integrates the metadata provider.

Installation

Public Metadata Providers

Most icons can be imported using the following CSS:

@import url("https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/public-icon.css");

Add this to the top of Dashboard -> General -> Custom CSS code.

It is no longer relevant. shoko and stash now work when using public-icon.css

Local Metadata Providers

For local metadata providers like Stash and Shoko, update the CSS files with your local server address.

Shoko

Modify and add the following CSS to the top of Dashboard -> General -> Custom CSS code:

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/collection/group"] {
    background: none !important;
    color: transparent !important;
    padding: 0 !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/collection/group"]::before {
	content: "";
	display: inline-block;
	width: 60px;
	height: 25px;
	background-image: url('https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/icons/shoko/shoko-group.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
	vertical-align: middle;
}

.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/collection/group"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/collection/group"]:focus,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/collection/group"]:active {
    background: none !important;
    filter: none !important;
    border: none !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/collection/group"] {
	font-size: 0;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/collection/series"] {
    background: none !important;
    color: transparent !important;
    padding: 0 !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/collection/series"]::before {
	content: "";
	display: inline-block;
	width: 60px;
	height: 25px;
	background-image: url('https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/icons/shoko/shoko-series.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
	vertical-align: middle;
}

.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/collection/series"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/collection/series"]:focus,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/collection/series"]:active {
    background: none !important;
    filter: none !important;
    border: none !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/collection/series"] {
	font-size: 0;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/redirect/episode"] {
    background: none !important;
    color: transparent !important;
    padding: 0 !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/redirect/episode"]::before {
	content: "";
	display: inline-block;
	width: 65px;
	height: 25px;
	background-image: url('https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/icons/shoko/shoko-episode.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
	vertical-align: middle;
}

.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/redirect/episode"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/redirect/episode"]:focus,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/redirect/episode"]:active {
    background: none !important;
    filter: none !important;
    border: none !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/redirect/episode"] {
	font-size: 0;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/redirect/file"] {
    background: none !important;
    color: transparent !important;
    padding: 0 !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/redirect/file"]::before {
	content: "";
	display: inline-block;
	width: 60px;
	height: 25px;
	background-image: url('https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/icons/shoko/shoko-file.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
	vertical-align: middle;
}

.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/redirect/file"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/redirect/file"]:focus,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:8111/webui/redirect/file"]:active {
    background: none !important;
    filter: none !important;
    border: none !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:8111/webui/redirect/file"] {
	font-size: 0;
}

Stash

Modify and add the following CSS to the top of Dashboard -> General -> Custom CSS code:

.itemExternalLinks a[href*="http://CHANGE_ME:9999/scenes"] {
    background: none !important;
    color: transparent !important;
    padding: 0 !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/scenes"]::before {
	content: "";
	display: inline-block;
	width: 35px;
	height: 25px;
	background-image: url('https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/icons/stash/stash.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
	vertical-align: middle;
}

.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/scenes"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/scenes"]:focus,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/scenes"]:active {
    background: none !important;
    filter: none !important;
    border: none !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/scenes"] {
	font-size: 0;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/studios"] {
    background: none !important;
    color: transparent !important;
    padding: 0 !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/studios"]::before {
	content: "";
	display: inline-block;
	width: 35px;
	height: 25px;
	background-image: url('https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/icons/stash/stash.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
	vertical-align: middle;
}

.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/studios"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/studios"]:focus,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/studios"]:active {
    background: none !important;
    filter: none !important;
    border: none !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/studios"] {
	font-size: 0;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/performers"] {
    background: none !important;
    color: transparent !important;
    padding: 0 !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/performers"]::before {
	content: "";
	display: inline-block;
	width: 35px;
	height: 25px;
	background-image: url('https://cdn.jsdelivr.net/gh/Druidblack/jellyfin-icon-metadata@main/icons/stash/stash.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
	vertical-align: middle;
}

.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/performers"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/performers"]:focus,
.itemExternalLinks.focuscontainer-x > a[href*="http://CHANGE_ME:9999/performers"]:active {
    background: none !important;
    filter: none !important;
    border: none !important;
}

.itemExternalLinks a[href*="http://CHANGE_ME:9999/performers"] {
	font-size: 0;
}

Screenshots

Credits: This idea was inspired by the theme Finimalism.

Star History