Sign In

Subscribe to our newsletter

For the latest in self-hosted news, software, and content delivered straight to your inbox every Friday

Success! Now Check Your Email

To complete Subscribe, click the confirmation link in your inbox. If it doesn’t arrive within 3 minutes, check your spam folder.

Ok, Thanks
Sign In

About selfh.st/icons

selfh.st/icons is a collection of project assets initially built as a data store for the icons displayed in the selfh.st/apps application directory. It has been made publicly available and expanded to include icons spanning all technology services to be leveraged by anyone looking to populate dashboards, documentation, and other visual mediums.

Requests and Contributions

The collection of icons and logos found in the collection are maintained solely by the selfh.st team.

New icon requests, updates, and issues with existing icons can be raised via the project repository's Discussions page. The selfh.st team is committed to acknowledging all requests in a timely manner.

Integrations

The following applications have built-in support for the selfh.st/icons collection:

Icon Details

Links can be easily obtained through browsing the selfh.st/icons directory and clicking on a corresponding format for a given icon, which will automatically copy a link to that icon and format to the clipboard.

An icon link consists of three values, each of which is described in further detail below:

A complete icon link will look like this:

https://<Base URL>/<Format>/<Reference Name>.<Format>

For example, the icon URL for the PNG version of the Immich icon would be:

https://cdn.jsdelivr.net/gh/selfhst/icons/png/immich.png

Base URL

The project leverages jsDelivr, a free and reliable CDN for GitHub repositories, to provide links to each icon. Use the base URL below as the starting point for all icons in the collection.

Reference (Name)

Icons are referred to by a value stored as their Reference. To convert an icon to its Reference name, convert all letters in the project name to lowercase and replace all non-alphanumeric characters with hyphens (-).

See the examples below for further reference.

Formats

Icons are available in three possible formats:

When available, SVG is the preferred starting point for icons and later converted into PNG and WebP formats. However, not all projects provide SVG icons. When this occurs, PNG is used as the starting point.

Light Versions

Not all icons and logos are suitable for webpages with dark backgrounds. If this occurs and an SVG format is available, the icon is converted to lighter colors and can be referenced by appending -light to the end of the icon's Reference name.

For example:

The selfh.st/icons directory has a toggle to display light versions when available.

Size

All icons are made available in a 1:1 aspect ratio. The majority are converted into a 512x512 square when possible to do so without compromising quality. Occasionally, icons with SVGs heavily relying on strokes or those without SVG versions may be found in smaller or larger sizes.

Sources

Most icons are sourced directly from a project's code repository or website. Occasionally, the sites below are leveraged when quality icons cannot be obtained directly from the source.

Acknowledgements

Some of the concepts implemented in the execution of this collection were inspired by the work done by the team at walkxcode/dashboard-icons - the initial source for icons at selfh.st/apps. As we quickly outgrew the team's available icons and pace of delivery, we loosely modeled the building of this collection after their own to ensure a seamless transition.

The FitSelectionToArtboard script found in creold/illustrator-scripts is also utilized to easily resize assets when required.

Disclaimer

The icons found in this collection are the property of their respective owners/entities and not affiliated with or represented by selfh.st. Access to the icons is offered free of charge and bound by the usage outlined by the project's license.