diff --git a/README.md b/README.md index af9ffec6..679babc0 100644 --- a/README.md +++ b/README.md @@ -157,14 +157,6 @@ Think the icons look wrong? [Compare them against the official logos](https://g **New!** Icons also available in [Android Vector Drawables](https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html) so you can easily use them in Android apps. Converted using https://inloop.github.io/svg2android/ - not guaranteed to be under 1KB. -## Icon accessibility - -The super tiny icons are accessible by default. Each icon has: -* `role="img"`, to expose the `````` elements as images in the browser's accessibility tree -* `aria-label="XYZ"` (where XYZ is the icon's brand name), to give the icon an accessible name - -`Note:` if using the `````` as the `src` for an `````` element, the `alt` attribute should still be used on the `````` element because the ARIA is not recognised in this context. - ## Submitting Icons I'd *love* you to submit something 😸 The rules are simple, your icon must: @@ -174,6 +166,24 @@ I'd *love* you to submit something 😸 The rules are simple, your icon must: * have solid colours. No gradients or fades. * represent a popular service's current logo. +### Template + +At a minimum, your icon needs these components: + +``` + + + +``` + +### Icon accessibility + +The super tiny icons are accessible by default. Each icon has: +* `role="img"`, to expose the `````` elements as images in the browser's accessibility tree +* `aria-label="XYZ"` (where XYZ is the icon's brand name), to give the icon an accessible name + +`Note:` if using the `````` as the `src` for an `````` element, the `alt` attribute should still be used on the `````` element because the ARIA is not recognised in this context. + ### Guidelines This is the standard guideline. Use this to help with sizing your icons and they will look good no matter what border radius is chosen.