Use this to help with sizing your icons and they will look good no matter what border radius is chosen. 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.ĬSS-Tricks has also an article about accessible SVG icons. aria-label='XYZ' (where XYZ is the icon's brand name), to give the icon an accessible name.role='img', to expose the elements as images in the browser's accessibility tree.The super tiny icons are accessible by default.

represent a popular service's current logo.Īt a minimum, your icon needs these components:.fit inside a circle with radius 256 pixels.That is, the maximum file size is 1023 bytes. I'd love you to submit something 😸 The rules are simple, your icon must: Icons also available as Android Vector Drawables, so you can easily use them in Android apps. If they still look wrong, tell me by raising an issue! Android Vector Drawables Think the icons look wrong? Compare them against the official logos. Want more icons? Tell me by raising an issue! Think you can make them smaller? Tell me by raising an issue! The precision can be reduced if necessary. A few logos have 1 or 2 dp to make them look more accurate. The precision of the paths is mostly 0 decimal places.

The background colour can also be excluded if you're including it elsewhere.

This isn't strictly necessary - but some web browsers won't display them as an image without it.

Each of these has an xmlns='' in the tag.

These files were edited by hand in Inkscape, Illustrator, or a text editor, then were minified using Yann Armelin's SVG Path Editor, svgo, and svgcleaner. Simplicity should be our goal in all endeavours. They cost money to store, transport, and process. They will scale up and down to suit your needs.īytes cost money. The logos have a 512x512 viewbox, they will fit in a circle with radius 256. Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos.

Free social media svg icons