- Updated package manager version to pnpm@10.11.0 in package.json.
- Added robots metadata for SEO in page.tsx.
- Changed Open Graph type from "article" to "website" and added siteName and images.
- Included canonical URL in alternates for better indexing.
- Added structured data for icons in the IconDetails component with priority loading for images.
* feat(web): Refactor icon filtering and sorting logic using a new utility function
* feat(command-menu): Improve display and performance of cmd+k menu
* fix(utils): Adjust scoring logic in fuzzySearch and filter thresholds
* feat(web): add og image for /icons page
* refactor(web): change description to fit project
Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
* feat: Add daily release workflow for CF
* refactor(web): Update descriptions and consistency (#1264)
* refactor(web): Update descriptions and consistency
* revert: Issue templates
* refactor(web): More extensive search placeholder
---------
Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
Co-authored-by: Thomas Camlong <thomas@ajnart.fr>
* feat(icons): add greenlight (#1275)
Co-authored-by: Dashboard Icons Manager <193821040+dashboard-icons-manager[bot]@users.noreply.github.com>
* chore: Move SEO audit to /web
Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
* feat(web/icons): implement fixed representative icons for OpenGraph image
- Added a predefined list of representative icons to be used in the OpenGraph image.
- Updated the logic to display the number of icons based on the rounded total instead of a fixed selection.
---------
Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
Co-authored-by: Bjorn Lammers <bjorn@lammers.media>
Co-authored-by: dashboard-icons-manager[bot] <193821040+dashboard-icons-manager[bot]@users.noreply.github.com>
- Update UI with refined rose-themed styling throughout the site
- Add mobile-responsive improvements to header and hero sections
- Create new 'Recently Added Icons' component with animated cards
- Improve icon details view with better visual hierarchy and theme indicators
- Implement better hover effects and transitions for interactive elements
- Add mobile menu for better navigation on smaller screens
- Update license notice wording
- Remove grid background in favor of refined blur effects
- Rewrite README with better structure and new branding
- Update contributing guidelines for clarity
- Revise code of conduct for better readability
- Add preview video asset
2025-04-17 18:04:55 +02:00
1042 changed files with 41715 additions and 28964 deletions
Once you've submitted the issue, sombody from the team will review it, before adding a label which automatically creates a pull request with the other filetypes.
If you submit a PNG icon, please note, that the SVG can not be generated from it.
- type:input
id:name
attributes:
label:Icon name
description:The name has to be unique and should be kebab-case.
placeholder:e.g. "icon-name"
- type:textarea
id:icon
attributes:
label:Paste icon
description:|
Please paste the icon here. It will automatically upload it to github.
We are committed to creating a welcoming and harassment-free environment for everyone who contributes to our icon repository. This includes people of all genders, gender identities, sexual orientations, disabilities, appearances, body sizes, races, ages, religions, and nationalities.
## Our Commitment
### Communication
We are committed to maintaining a welcoming and inclusive environment for everyone who contributes to our icon collection. This includes people of all backgrounds, identities, and experiences.
All communication should be appropriate for a professional audience, respectful, constructive, and considerate of people from different backgrounds. Please aim to create a positive and inclusive atmosphere.
## Expected Behavior
### Prohibited Behavior
- Be respectful and constructive in all communications
- Focus on what's best for the community
- Show empathy towards other community members
- Be open to different viewpoints and experiences
We do not tolerate harassment, intimidation, discrimination, or any other inappropriate conduct, whether in communication or behavior. Prohibited actions include:
## Unacceptable Behavior
- The use of sexual language or imagery
- Deliberate intimidation or stalking
- Unwelcome sexual attention or harassment
- Inappropriate physical contact
- Disruptions during events or conversations
- Discrimination of any kind
The following behaviors are unacceptable:
### Reporting
- Harassment, discrimination, or intimidation
- Offensive comments related to personal characteristics
- Unwelcome sexual attention or advances
- Disruptive behavior in community spaces
- Any other conduct that could reasonably be considered inappropriate
If you witness or experience behavior that violates this code of conduct, please report it immediately to [homarr-labs@proton.me](mailto:homarr-labs@proton.me). All reports will be reviewed confidentially and promptly, and appropriate actions will be taken.
## Reporting
### Consequences
If you experience or witness behavior that violates this code:
Anyone violating this code of conduct may face consequences, such as warnings, removal from the repository, or a ban from future participation. We take violations seriously to ensure a safe and welcoming environment for everyone.
1. Contact us at [homarr-labs@proton.me](mailto:homarr-labs@proton.me)
2. Provide as much detail as possible about the incident
3. All reports will be reviewed confidentially
### Acknowledgment
## Enforcement
By contributing to this repository, you agree to adhere to this code of conduct. Thank you for helping us create an inclusive and supportive environment for all contributors.
Violations of this code may result in:
- Warning
- Temporary suspension
- Permanent ban from the community
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 2.0.
Thank you for your interest in contributing to the icon repository! To ensure smooth collaboration, please follow these guidelines. Your contributions help make this project better.
Thank you for your interest in contributing to our icon collection! These guidelines will help ensure smooth collaboration and maintain the quality of our collection.
- [Light and Dark Versions](#light-and-dark-versions)
- [File Naming](#file-naming)
- [Quality Requirements](#quality-requirements)
- [Git Commit Messages](#git-commit-messages)
- [Contribution Process](#contribution-process)
- [Code of Conduct](#code-of-conduct)
- [Contact](#contact)
- [Contributing to Dashboard Icons](#contributing-to-dashboard-icons)
- [Table of Contents](#table-of-contents)
- [Icon Specifications](#icon-specifications)
- [Format Requirements](#format-requirements)
- [Quality Standards](#quality-standards)
- [Light \& Dark Variants](#light--dark-variants)
- [File Naming](#file-naming)
- [Requesting New Icons](#requesting-new-icons)
- [Improving the Repository](#improving-the-repository)
- [Code of Conduct](#code-of-conduct)
- [Questions?](#questions)
## Icon Specifications
### Format
### Format Requirements
- **SVG Format Required**: All icons should be submitted in SVG format. If an SVG version is unavailable, a PNG version will suffice, and a WEBP version will be generated accordingly.
- **Automatic PNG and WEBP Generation**: PNG and WEBP versions are generated automatically from the SVG (or PNG) files using the following settings:
-**Dimensions**:
-Height: 512 pixels
-Width: Auto (maintaining aspect ratio)
- **Transparency**: Enabled
- **SVG Format**: All icons must be submitted in SVG format
- **Auto-Generated Formats**: PNG and WEBP versions are generated automatically with:
-Height: 512 pixels
-Width: Auto (maintaining aspect ratio)
-Transparency: Enabled
### Cropping
### Quality Standards
- **Remove Empty Space**: Crop any empty space from your SVG files to ensure the icon is properly centered and sized. You can use [SVG Crop](https://svgcrop.com/) to assist with this.
- **Clean SVG**: No embedded raster images in SVG files
- **Proper Cropping**: Remove empty space for proper centering
- Use [SVG Crop](https://svgcrop.com/) for assistance
- **No Upscaling**: Maintain original quality without artificial enlargement
### Light and Dark Versions
### Light & Dark Variants
- **Monochrome or Single Primary Color Icons**:
- If your icon is monochrome, please provide additional versions if applicable:
- **`-light` Version**: For icons primarily dark or using black as a main color, provide a `-light` version for light backgrounds.
-**`-dark` Version**: For icons primarily light or using white as a main color, provide a `-dark` version for dark backgrounds.
-**Examples**:
- A black logo should include a `-light` version where black is inverted.
-A multicolored logo using black should provide a `-light` version with the black replaced.
-**Tool Recommendation**: [DEEditor](https://deeditor.com/) can help adjust icon colors if needed.
For monochrome or single-color icons:
- **Light Variant**: Required for dark backgrounds
-Invert black elements
-Adjust colors for visibility
- **Dark Variant**: Required for light backgrounds
-Invert white elements
-Adjust colors for visibility
**Tool Recommendation**: [DEEditor](https://deeditor.com/) for color adjustments
### File Naming
- **Kebab Case**: Name your files using kebab case (lowercase words separated by hyphens). For example, "Nextcloud Calendar" becomes `nextcloud-calendar.svg`.
-**Note**: Filenames are automatically converted to kebab case, but please double-check your naming to avoid conflicts or errors.
- **No Upscaled Images**: Icons should maintain their original quality without artificial enlargement.
- **No Embedded Raster Images in SVGs**: Ensure that SVG files are true vector graphics without embedded raster images.
To request a new icon:
## Git Commit Messages
1.**Create an Issue**:
- Use the appropriate [issue template](https://github.com/homarr-labs/dashboard-icons/issues/new/choose)
- Choose between "Light & dark icon" or "Normal icon" template
- **Use Semantic Commits**: Follow the format <type>(scope): description:
-`feat(icons): add nextcloud-calendar` when adding new icons.
2.**Provide Information**:
-Service/application name
- Official logo or icon source
- Any specific requirements or notes
## Contribution Process
3.**Upload Icon** (optional):
- Attach the SVG file directly to the issue
- Include both light and dark variants if applicable
### Adding an icon
4.**Wait for Review**:
- Our team will review your request
- We may request adjustments if needed
- Once approved, we'll add the icon to the collection
To add an icon to the repository, follow these steps:
## Improving the Repository
1.**Create issue**: Create an issue from one of the add [templates](https://github.com/homarr-labs/dashboard-icons/issues/new/choose):
- **Light & dark icon**: Use this template to request a new icon with both light and dark versions.
- **Normal icon**: Use this template to request a new icon with a single version.
2.**Fill out the template**: Provide the requested information in the template. You can upload the icons directly to the issue.
3.**Wait for approval**: Wait for the issue to be approved by a maintainer. If any changes are needed, they will be requested in the issue.
4.**Maintainer approves & merges**: Once the issue is approved, a pull request with all the necessary changes will be created and merged by a maintainer.
To contribute to the repository itself:
### Updating an icon
1.**Fork the Repository**
2.**Make Your Changes**:
- Documentation improvements
- Website enhancements
- Repository maintenance
- Bug fixes
To update an icon in the repository, follow these steps:
1.**Create issue**: Create an issue from the update [template](https://github.com/homarr-labs/dashboard-icons/issues/new/choose).
-**Light & dark icon**: Use this template to request a new icon with both light and dark versions.
-**Normal icon**: Use this template to request a new icon with a single version.
2.**Fill out the template**: Provide the requested information in the template. You can upload the icons directly to the issue.
3.**Wait for approval**: Wait for the issue to be approved by a maintainer. If any changes are needed, they will be requested in the issue.
4.**Maintainer approves & merges**: Once the issue is approved, a pull request with all the necessary changes will be created and merged by a maintainer.
### Change metadata / any other change
To change the metadata of an existing icon or any other change, follow these steps:
1.**Fork the Repository**: Create a fork of this repository on your GitHub account.
2.**Clone the Repository**: Clone your forked repository to your local machine.
3.**Add Your Icons**: Place your SVG icon(s) into the appropriate directory, following the specifications above.
4.**Commit Your Changes**: Commit your additions with clear and descriptive commit messages using Gitmoji.
5.**Push to Your Fork**: Push your committed changes to your forked repository on GitHub.
6.**Create a Pull Request**: Submit a pull request to the main repository for review.
3.**Submit a Pull Request**:
- Use semantic commit messages following the format: `<type>(scope): description`
-`feat(icons): add nextcloud-calendar`
-`fix(website): correct icon preview`
-`docs(readme): update installation instructions`
- Reference any related issues
- Follow our [Code of Conduct](CODE_OF_CONDUCT.md)
## Code of Conduct
By contributing, you agree to abide by our [Code of Conduct](CODE_OF_CONDUCT.md). Please review it to understand the expectations for all participants.
## Contact
## Questions?
If you have any questions or need assistance, feel free to reach out at [homarr-labs@proton.me](mailto:homarr-labs@proton.me). I'm happy to help.
If you have any questions or need assistance, contact us at [homarr-labs@proton.me](mailto:homarr-labs@proton.me).
> The repository has been migrated from `walkxcode` to `homarr-labs` as I no longer have the capacity to maintain it. The Homarr team will now handle management and maintenance, ensuring that functionality remains unchanged. The project will always be usable outside of Homarr and no breaking changes will be introduced.
> ― *Bjorn*
>
> The license and guidelines have been updated, so please review them. To help with maintenance, contact us at [homarr-labs@proton.me](mailto:homarr-labs@proton.me).
A collection of over 1800 curated icons for services, applications and tools, designed specifically for dashboards and app directories.
Your definitive source for dashboardicons.
[**View icons →**](https://icons.homarr.dev)
**[→ Browse the collection at dashboardicons.com](https://dashboardicons.com)**
## Table of Contents
## Why Dashboard Icons?
-[Dashboard Icons](#dashboard-icons)
-[Table of Contents](#table-of-contents)
-[Icon Requests](#icon-requests)
-[Supported Dashboards](#supported-dashboards)
-[Usage and Details](#usage-and-details)
- [Direct Links](#direct-links)
- [Base URL](#base-url)
- [Icon Name](#icon-name)
- [Formats](#formats)
- [Dark/Light Variants](#darklight-variants)
- [Downloading Icons](#downloading-icons)
- [Disclaimer](#disclaimer)
-**Comprehensive Collection**: 1800+ icons for all popular services and tools
-**Consistent Style**: Uniform visual language across different services
-**Multiple Formats**: Available in SVG, PNG, and WEBP to suit your needs
-**Light & Dark Variants**: Icons optimized for both light and dark themes
-**Community-Driven**: Easy process to request missing icons
## Icon Requests
<palign="center">
<ahref="https://dashboardicons.com">
<videowidth="650"autoplayloopmutedplaysinline>
<sourcesrc="assets/preview.mp4"type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
</p>
If you’d like to add a new icon, please review our [Contribution Guidelines](CONTRIBUTING.md) and then submit a request using [our issue templates](https://github.com/homarr-labs/dashboard-icons/issues/new/choose).
## Using the Icons
## Supported Dashboards
### Website
Dashboard Icons integrate seamlessly with several popular dashboards, including:
Find and download icons at [dashboardicons.com](https://dashboardicons.com):
**Disclaimer**: All product names, trademarks, and registered trademarks are the property of their respective owners. Icons are used for identification purposes only and do not imply endorsement.
Icons follow kebab-case formatting (all lowercase words separated by hyphens). For example, "Nextcloud Calendar" becomes `nextcloud-calendar`.
**License**: This project is available under the terms of the [LICENSE](LICENSE) file.
#### Formats
---
Icons are available in these formats:
- SVG
- PNG
- WEBP
*All icons are generated from the base SVG file. For more details, see the [Contribution Guidelines](CONTRIBUTING.md).*
### Dark/Light Variants
Some icons may have very light or dark colors, which might reduce visibility on certain backgrounds. In such cases, a `-light` or `-dark` suffix is appended—for instance, "2fauth" becomes `2fauth-light`.
*More specifics are available in the [Contribution Guidelines](CONTRIBUTING.md).*
### Downloading Icons
1.**Browse & Download:**
Visit [https://icons.homarr.dev](https://icons.homarr.dev) to easily view and download icons.
2.**Using the Browser:**
On the icons page ([ICONS.md](ICONS.md)), right-click any icon link and select "Save link as".
**Note:** Loading the icons page displays every icon in the repository, which may lead to high data usage, slow performance, or even browser crashes on less powerful devices. For faster access, use the direct links or download icons individually.
3.**Using the Terminal:**
Download icons via `curl` or `wget` by using the following structure:
Unless stated otherwise, all images and assets in this repository—including product names, trademarks, and registered trademarks—belong to their respective owners and are used solely for identification purposes. Their inclusion does not imply endorsement.
For more details, please review the [LICENSE](LICENSE). If you have any questions or concerns, contact us at [homarr-labs@proton.me](mailto:homarr-labs@proton.me).
<palign="center">
Made with ♥ by the <ahref="https://github.com/homarr-labs">Homarr Labs</a> team and contributors
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.