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;
 		}
 	 </style>
 	</head>
 	<body>
 	 <h1>Super Tiny Icons</h1>
 	 <a href="https://github.com/edent/SuperTinyIcons">Download the SuperTinyIcons SVGs on GitHub</a>
+	 <p>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.</p>
+
+	 <img src="https://edent.github.io/SuperTinyIcons/images/guidelines/guideline.svg" width="128" alt="A template for logos" />
+
+	<ul>
+		<li><strong>Green</strong> is the safe zone, where the main body of the icon should be.</li>
+		<li><strong>Yellow</strong> is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments.</li>
+		<li><strong>Red</strong> is off limits. It should not be touched by the icons. Red is also how a circular icon would look.</li>
+	</ul>
 	 <section class="flex two four-800">
 		<h2>Radius %</h2>
 		<label>
@@ -47,6 +65,7 @@
 
 	 <script>
 		var items = [
+			'../guidelines/guideline',
 			'amazon',     'github',      'html5',      'mastodon',   'reddit',       'soundcloud', 
 			'tox',        'wechat',      'youtube',    'dropbox',    'gitlab',       'instagram', 
 			'paypal',     'rss',         'spotify',    'tumblr',     'whatsapp',     'email',
@@ -81,7 +100,7 @@
 		var icons;
 		Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
 			icons = all.map(icon => {
-				return icon + '<b>' + icon.match(/aria-label\=\"(.*?)\"/)[1] + '</b>';
+				return icon;
 			});
 
 			render(range.value);
@@ -91,9 +110,9 @@
 			console.log('Rendering!', icons);
 
 			icons = icons.map(icon => {
-			 return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
+				return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
 			});
-			container.innerHTML = '<div>' + icons.join('</div><div>') + '</div>';
+			container.innerHTML = '<div class="underlay">' + icons.join('<img class="overlay" src="images/guidelines/guideline.svg"/></div><div  class="underlay">') + '<img class="overlay" src="images/guidelines/guideline.svg"/></div>';
 		}
 	</script>
 </body>
