- 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
Sadly we can no longer update this file as it reached 100MB and that's the max size allowed on GitHub to have files, we could only increase it further by paying for the bandwidth
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.
Thank you for your interest in contributing to our icon repository! To ensure smooth collaboration, please make sure to read and agree to our [Contribution Guidelines](https://github.com/homarr-labs/dashboard-icons/blob/main/CONTRIBUTING.md) before submitting your request.
- type:checkboxes
attributes:
label:Contribution Guidelines
options:
- label:"I have read and agree to the [Contribution Guidelines](https://github.com/homarr-labs/dashboard-icons/blob/main/CONTRIBUTING.md)"
required:true
- type:textarea
id:icon-name
attributes:
label:Icon Name
description:What is the name of the icon you are requesting or suggesting?
placeholder:Enter icon name here
validations:
required:true
- type:textarea
id:icon-details
attributes:
label:Icon Details
description:Provide any additional details or context for the icon request.
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`, because I do not have the capacity/time to keep maintaining it. The Homarr team will take over all management and maintenance, whilst keeping all functionality for you, the user, the same. The project will always be usable outside of Homarr itself and breaking changes will not be made. ^Bjorn
>
> The license and guidelines have changed, so please review them. If you want to help with maintenance, reach out to [homarr-labs@proton.me](mailto:homarr-labs@proton.me).
Alternatively, you can use direct links to the repository:
**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.
**License**: This project is available under the terms of the [LICENSE](LICENSE) file.
#### Name
---
Icons are named using kebab case (lowercase words separated by hyphens). For example, "Nextcloud Calendar" becomes `nextcloud-calendar`.
#### Formats
Icons are available in the following formats:
- SVG
- PNG
- WEBP
All icons are generated from the SVG file as the base.
*Read more about the specifics and standards of icons in the [Contribution Guidelines](CONTRIBUTING.md).*
### Dark/Light Versions
In some cases, an icon might have very light or dark colors, making it hard to see on certain backgrounds. In this situation, a `-light` or `-dark` version will be added to the end of the icon's name, with colors adjusted accordingly.
For example, "2fauth" becomes `2fauth-light`.
*Read more about the specifics and standards of icons in the [Contribution Guidelines](CONTRIBUTING.md).*
### Downloading Icons
To download icons from the [icons page](ICONS.md), simply Right-click the icon link and select "Save link as".
**Warning**: Visiting the icons page will load every icon in the repository. This may result in:
- High data usage.
- System slowdowns.
- Browser crashes on some devices.
If you prefer not to load all icons at once, consider using the direct links or downloading icons individually.
To download icons using the terminal, use `curl` or `wget`. Refer to [Direct Links](#direct-links) for details on the link structure.
Unless otherwise indicated, all images and assets in this repository, including product names, trademarks, and registered trademarks, are the property of their respective owners. These images and assets are used for identification purposes only, and their use does not imply endorsement.
Read the [LICENSE](LICENSE) for more information about the project itself. For 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.