From c0db6b6ff02348be633826b16989a2622fd57156 Mon Sep 17 00:00:00 2001 From: edent Date: Sat, 2 Dec 2017 17:00:15 +0000 Subject: [PATCH] Icon Layout Tool For #86 --- README.md | 4 ++-- radius.html | 25 ++++++++++++++++++++++--- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 43d56d0c..dbce5a4c 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,6 @@ Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourit The logos have a 512x512 viewbox, they will fit in a circle with radius 256. They will scale up and down to suit your needs. -You can [play around with the corner radius size using our interactive tool](https://edent.github.io/SuperTinyIcons/radius.html) - Originally created for my contact page - [https://edent.tel/](https://edent.tel/) ## How Small? @@ -182,6 +180,8 @@ This is the standard guideline. Use this to help with sizing your icons and they * **Yellow** is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments. * **Red** is off limits. It should not be touched by the icons. Red is also how a circular icon would look. +To see how the logos look, you can [play around with the corner radius size using our interactive tool](https://edent.github.io/SuperTinyIcons/radius.html) + ## Licenses The majority of these vector logos are based on someone else's work. diff --git a/radius.html b/radius.html index 1ed10042..0a7039f7 100644 --- a/radius.html +++ b/radius.html @@ -27,12 +27,30 @@ } svg { display: block; + position: absolute; + } + .overlay { + position: absolute; + opacity: 0.25; + } + .underlay { + position: relative; + height:150px; }

Super Tiny Icons

Download the SuperTinyIcons SVGs on GitHub +

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.

+ + A template for logos + +

Radius %