From 8b2f2c6ae903c19f987a6344798e00c0c35fa2e8 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Thu, 13 Nov 2025 22:56:56 -0500 Subject: [PATCH 1/2] Add styleguide --- STYLEGUIDE.md | 137 +++++++++++++++++++++++++++++++++++++++++++++++++ icon-guide.svg | 48 +++++++++++++++++ 2 files changed, 185 insertions(+) create mode 100644 STYLEGUIDE.md create mode 100644 icon-guide.svg diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md new file mode 100644 index 000000000..828df5d7a --- /dev/null +++ b/STYLEGUIDE.md @@ -0,0 +1,137 @@ +# Icon style guide + +**For images displayed in circular crops in both light mode and dark mode** + +This guide gives best practices for designing and formatting icons so they render cleanly when cropped into a circle and remain visible in both light and dark themes. + +## Canvas and layout + +### Artboard size + +- Use a square artboard: 100x100, 256x256, etc. +- All icons **must fit fully inside a circle** that touches the edges of the square + +### Safe area + +- Keep all artwork within **80% of the canvas** +- Leave at least **10% padding** from the edge on all sides + +This ensures the icon isn't cut off when masked in a circle. + +### Centering + +- Visually center the icon horizontally and vertically. +- Avoid overly tall or wide silhouettes that feel off-balance once cropped. + +## Content + +- Use simple shapes that are clearly visible at small sizes +- Avoid using text-based logos unless the logo is text-only + +Sometimes there are multiple logos to choose from. When in doubt, always go for the logo that looks like a simple icon. + +## Colors and backgrounds + +Icons must be visible in both light and dark mode themes. Avoid using transparent backgrounds, unless the icon has colors that are clearly visible in both themes. Otherwise, the icon **must** have a background. + +It is not recommended to use a circular background with transparent corners. The icon will be cropped into a circle in the UI. It is always best to use a square background that fills the entire artboard. + +## Formats + +SVG vectors are always best. If you must use a PNG raster, make sure it is high quality, but also make sure the file size is reasonable. + +Do not use animations. + +### Embedded images or nested SVGs + +Avoid embedded raster images, such as PNG-in-SVG. + +#### ❌ Do NOT use: + +- `` tags (PNG/JPEG inside an SVG) +- `` +- Nested `` elements inside the main SVG + +#### ✔️ Use instead: + +Pure vector paths and shapes only (``, ``, ``, ``, ``, etc.) + +### CSS styling inside SVGs + +#### ❌ Avoid: + +- ` + +The following icon will look uneven when cropped, because it is more tall than wide. The top and bottom edges will also touch the edges of the circle. Lastly, it will be nearly invisible in dark mode. + + + +The following icon is blurry. It may look sharper at smaller sizes, but it will never look crisp. + + + +The following icon has a lot of small details that will be unintelligible at small sizes. + + + +The following icon has a circular background that is smaller than the artboard + transparent corners, so it will look smaller than the circle crop used in the UI. It will thus look smaller than other icons displayed alongside it. + + + +The following PNG icon is too small. It will never look crisp. It is displayed here larger than the source image. The source image is only 20x20. + + + +The following icon has small text that will be very hard to read at small sizes. It also has a transparent background, so the dark text will be invisible in dark mode. + + + +### What to do + +The following icon uses clearly defined line art on a solid background, with ample space around the main artwork. It will look good in both light mode and dark mode at big and small sizes. + + + +The following icon guide can be helpful for comparing icons. + + + +- **Grey circle** = circular crop mask example - anything outside this circle will be cut off +- **Blue dashed square** = 80% safe content area (with 10% padding) +- **Plus sign** = example icon correctly centered and contained within the safe area. + +### Tools + +You can use [svgviewer.dev](https://svgviewer.dev) to hand-edit SVGs. You can also give an SVG to ChatGPT and ask it to edit the SVG for you. An example prompt: + +```Edit the following SVG to have a solid red background and center the current content with an added 10% padding so the resulting SVG is 120x120.``` diff --git a/icon-guide.svg b/icon-guide.svg new file mode 100644 index 000000000..7c3b8e99e --- /dev/null +++ b/icon-guide.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + From 87a509363b81710ae0af12a7586d06e0ea66f8bb Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Thu, 13 Nov 2025 22:59:40 -0500 Subject: [PATCH 2/2] Add link to README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 10bfbd797..4a20ddb1e 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Maintaining this list is a considerable chore, and it is not our highest priorit Criteria: -- The icon should be small, square, but high resolution, and a vector/svg or a png. +- The icon should be small, square, but high resolution, and a vector/svg or a png. Please refer to the [style guide](STYLEGUIDE.md) for best practices. - The address should be in checksum format or it will not be accepted. This is true of non-evm assets as well - since some network's addressing formats are case-sensitive. - PR should include link to official project website referencing the suggested address. - Project website should include explanation of project.