diff --git a/docs/02-for-app-authors/03-appdata-guidelines/01-quality-guidelines.mdx b/docs/02-for-app-authors/03-appdata-guidelines/01-quality-guidelines.mdx index 52148e5d..45f52a08 100644 --- a/docs/02-for-app-authors/03-appdata-guidelines/01-quality-guidelines.mdx +++ b/docs/02-for-app-authors/03-appdata-guidelines/01-quality-guidelines.mdx @@ -36,15 +36,19 @@ You can use the following grid to check if your icon has a reasonable footprint: -![Example footprints](./assets/app-icon-footprint.png) +![Examples of icons with footprints that are too large, too small, and just right.](assets/app-icon-footprint.png) ### Good contrast The icon should have good contrast on dark and light backgrounds. In particular, avoid single-color glyphs and the like since they can be very hard to see if the background color is similar. Dark colors near the edges are also a problem, since shadows don't help much with contrast on dark backgrounds. +![Illustration of why icons should not be dark near the edges, showing two similar device icons on dark and light backgrounds.](assets/app-icon-contrast.png) + ### Not too much or too little detail -The icon should be recognizable at small sizes. Avoid too many tiny details, small text, and generally try and match other well-executed app icons in terms of complexity. Icons should also be complex enough to be recognizable, e.g. a flat single-colored square is too simple. +The icon should be recognizable at small sizes. Avoid too many tiny details, small text, and generally try and match other well-executed app icons in terms of complexity. Icons should also be complex enough to be recognizable, e.g. a flat single-colored symbol is too simple. + +![Examples of icons with too much and too little detail.](assets/app-icon-detail.png) ### No baked-in shadows @@ -54,6 +58,8 @@ The icon should not have any baked-in shadows or glows. Both the Flathub website The icon should be somewhat in line with the contemporary icon styles (i.e. not look like it hasn't been updated in decades). The [GNOME](https://developer.gnome.org/hig/guidelines/app-icons.html) and [KDE ](https://develop.kde.org/hig/style/icons/colorful/application/) app icon guidelines are examples of the kind of style your icon should align with. +![Two icons that are not in line with contemproary styles, and two that are.](assets/app-icon-style.png) + ## App Name ### Not too long diff --git a/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-contrast.png b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-contrast.png new file mode 100644 index 00000000..4662f64b Binary files /dev/null and b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-contrast.png differ diff --git a/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-contrast.svg b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-contrast.svg new file mode 100644 index 00000000..5928058c --- /dev/null +++ b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-contrast.svg @@ -0,0 +1,880 @@ + + + + diff --git a/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-detail.png b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-detail.png new file mode 100644 index 00000000..f24e0a3c Binary files /dev/null and b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-detail.png differ diff --git a/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-detail.svg b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-detail.svg new file mode 100644 index 00000000..25f64ffd --- /dev/null +++ b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-detail.svg @@ -0,0 +1,780 @@ + + + + diff --git a/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-style.png b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-style.png new file mode 100644 index 00000000..837878c3 Binary files /dev/null and b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-style.png differ diff --git a/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-style.svg b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-style.svg new file mode 100644 index 00000000..360accca --- /dev/null +++ b/docs/02-for-app-authors/03-appdata-guidelines/assets/app-icon-style.svg @@ -0,0 +1,1202 @@ + + + +