- 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.
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.
If you submit a PNG icon, please note, that the SVG can not be generated from it.
- type:input
- type:input
id:name
attributes:
attributes:
label:Icon name
label:Icon name
description:The name has to be unique and should be kebab-case.
description:The name has to be unique and should be kebab-case.
placeholder:e.g. "icon-name"
placeholder:e.g. "icon-name"
- type:textarea
- type:textarea
id:icon
attributes:
attributes:
label:Paste icon
label:Paste icon
description:|
description:|
Please paste the icon here. It will automatically upload it to github.
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
The following behaviors are unacceptable:
- Deliberate intimidation or stalking
- Unwelcome sexual attention or harassment
- Inappropriate physical contact
- Disruptions during events or conversations
- Discrimination of any kind
### 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 our icon collection! These guidelines will help ensure smooth collaboration and maintain the quality of our collection.
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.
- [Contributing to Dashboard Icons](#contributing-to-dashboard-icons)
- [Table of Contents](#table-of-contents)
- [Table of Contents](#table-of-contents)
- [Icon Specifications](#icon-specifications)
- [Icon Specifications](#icon-specifications)
- [Format](#format)
- [Format Requirements](#format-requirements)
- [Cropping](#cropping)
- [Quality Standards](#quality-standards)
- [Light and Dark Versions](#light-and-dark-versions)
- [Light \& Dark Variants](#light--dark-variants)
- [File Naming](#file-naming)
- [File Naming](#file-naming)
- [Quality Requirements](#quality-requirements)
- [Requesting New Icons](#requesting-new-icons)
- [Git Commit Messages](#git-commit-messages)
- [Improving the Repository](#improving-the-repository)
- [Contribution Process](#contribution-process)
- [Code of Conduct](#code-of-conduct)
- [Code of Conduct](#code-of-conduct)
- [Contact](#contact)
- [Questions?](#questions)
## Icon Specifications
## 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.
- **SVG Format**: All icons must be submitted in SVG format
- **Automatic PNG and WEBP Generation**: PNG and WEBP versions are generated automatically from the SVG (or PNG) files using the following settings:
- **Auto-Generated Formats**: PNG and WEBP versions are generated automatically with:
- **Dimensions**:
- Height: 512 pixels
- Height: 512 pixels
- Width: Auto (maintaining aspect ratio)
- Width: Auto (maintaining aspect ratio)
-**Transparency**: Enabled
- 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**:
For monochrome or single-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.
- **Light Variant**: Required for dark backgrounds
-**`-dark` Version**: For icons primarily light or using white as a main color, provide a `-dark` version for dark backgrounds.
-Invert black elements
-**Examples**:
-Adjust colors for visibility
- A black logo should include a `-light` version where black is inverted.
- **Dark Variant**: Required for light backgrounds
-A multicolored logo using black should provide a `-light` version with the black replaced.
-Invert white elements
-**Tool Recommendation**: [DEEditor](https://deeditor.com/) can help adjust icon colors if needed.
-Adjust colors for visibility
**Tool Recommendation**: [DEEditor](https://deeditor.com/) for color adjustments
### File Naming
### File Naming
- **Kebab Case**: Name your files using kebab case (lowercase words separated by hyphens). For example, "Nextcloud Calendar" becomes `nextcloud-calendar.svg`.
- **Kebab Case**: Use lowercase with hyphens
-**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.
To request a new icon:
- **No Embedded Raster Images in SVGs**: Ensure that SVG files are true vector graphics without embedded raster images.
## 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:
2.**Provide Information**:
-`feat(icons): add nextcloud-calendar` when adding new icons.
-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):
To contribute to the repository itself:
- **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.
### 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:
3.**Submit a Pull Request**:
- Use semantic commit messages following the format: `<type>(scope): description`
1.**Create issue**: Create an issue from the update [template](https://github.com/homarr-labs/dashboard-icons/issues/new/choose).
-`feat(icons): add nextcloud-calendar`
-**Light & dark icon**: Use this template to request a new icon with both light and dark versions.
-`fix(website): correct icon preview`
-**Normal icon**: Use this template to request a new icon with a single version.
-`docs(readme): update installation instructions`
2.**Fill out the template**: Provide the requested information in the template. You can upload the icons directly to the issue.
- Reference any related issues
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.
- Follow our [Code of Conduct](CODE_OF_CONDUCT.md)
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.
## Code of Conduct
## 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.
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`.
<palign="center">
Made with ♥ by the <ahref="https://github.com/homarr-labs">Homarr Labs</a> team and contributors
#### Formats
</p>
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).
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.