diff --git a/index.html b/index.html
new file mode 100644
index 00000000..b9be3269
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+ Super Tiny Social Icons
+
+
+
+
+
+ Super Tiny Social Icons
+
+
+
+
+
+
+
+
diff --git a/javascript.js b/javascript.js
new file mode 100644
index 00000000..6ad3357e
--- /dev/null
+++ b/javascript.js
@@ -0,0 +1,37 @@
+var items = [
+ 'amazon', 'phone', 'spotify', 'wechat', 'dropbox', 'instagram', 'hackernews',
+ 'pinterest', 'stackoverflow', 'whatsapp', 'email', 'linkedin', 'reddit',
+ 'steam', 'wikipedia', 'facebook', 'lock', 'rss', 'slideshare', 'telegram',
+ 'mail', 'skype', 'tumblr', 'wordpress', 'github', 'pdf', 'vk', 'wire',
+ 'twitter', 'youtube', 'google_plus', 'paypal', 'snapchat', 'vimeo', 'flickr',
+ 'soundcloud', 'html5', 'mastodon'
+];
+
+var container = document.querySelector('.icons');
+var range = document.querySelector('input[type="range"]');
+var number = document.querySelector('input.rangeout');
+range.addEventListener('input', function(e){
+ number.value = parseInt(e.target.value);
+ render(e.target.value);
+});
+
+number.addEventListener('input', function(e){
+ range.value = parseInt(e.target.value);
+ render(e.target.value);
+});
+
+var urls = items.map(item => '/tiny/' + item + '.svg');
+var icons;
+Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
+ icons = all;
+ render(range.value);
+});
+
+var render = function(radius = 15){
+ console.log('Rendering!', icons);
+
+ icons = icons.map(icon => {
+ return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
+ });
+ container.innerHTML = '' + icons.join('
') + '
';
+}
diff --git a/tiny/instagram.svg b/tiny/instagram.svg
index cef993b4..f9b2fe5f 100644
--- a/tiny/instagram.svg
+++ b/tiny/instagram.svg
@@ -1,5 +1,5 @@
diff --git a/tiny/lock.svg b/tiny/lock.svg
index d8cc7aff..ea64c254 100644
--- a/tiny/lock.svg
+++ b/tiny/lock.svg
@@ -1,6 +1,6 @@