--- --- {% assign iconsUnsortedString = "" %} {% assign greyscaleIconsUnsortedString = "" %} {% for icon in site.data.simple-icons.icons %} {% assign title = icon.title %} {% assign filename = icon.title | replace: "+", "plus" | replace: " ", "" | replace: ".", "" | replace: "-", "" | replace: "!", "" | replace: "’", "" | downcase %} {% assign hex = icon.hex %} {% assign hex = icon.hex %} {% assign hexCharacter1 = hex | slice: 0, 1 %} {% assign hexCharacter2 = hex | slice: 1, 1 %} {% assign hexCharacter3 = hex | slice: 2, 1 %} {% assign hexCharacter4 = hex | slice: 3, 1 %} {% assign hexCharacter5 = hex | slice: 4, 1 %} {% assign hexCharacter6 = hex | slice: 5, 1 %} {% capture hexCharacterString %}{{ hexCharacter1 }},{{ hexCharacter2 }},{{ hexCharacter3 }},{{ hexCharacter4 }},{{ hexCharacter5 }},{{ hexCharacter6 }}{% endcapture %} {% assign hexCharacterArray = hexCharacterString | split: "," %} {% assign rgbString = "" %} {% for hexCharacter in hexCharacterArray %} {% case hexCharacter %} {% when "A" %} {% assign rgbString = rgbString | append: "10" %} {% when "B" %} {% assign rgbString = rgbString | append: "11" %} {% when "C" %} {% assign rgbString = rgbString | append: "12" %} {% when "D" %} {% assign rgbString = rgbString | append: "13" %} {% when "E" %} {% assign rgbString = rgbString | append: "14" %} {% when "F" %} {% assign rgbString = rgbString | append: "15" %} {% else %} {% assign rgbString = rgbString | append: hexCharacter %} {% endcase %} {% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %} {% endfor %} {% assign rgbArray = rgbString | split: "," %} {% assign rgbRed = rgbArray[0] | times: 16 | plus: rgbArray[1] | divided_by: 255.0 | round: 2 %} {% assign rgbGreen = rgbArray[2] | times: 16 | plus: rgbArray[3] | divided_by: 255.0 | round: 2 %} {% assign rgbBlue = rgbArray[4] | times: 16 | plus: rgbArray[5] | divided_by: 255.0 | round: 2 %} {% assign rgbMax = 0.0 %} {% if rgbRed > rgbMax %} {% assign rgbMax = rgbRed %} {% endif %} {% if rgbGreen > rgbMax %} {% assign rgbMax = rgbGreen %} {% endif %} {% if rgbBlue > rgbMax %} {% assign rgbMax = rgbBlue %} {% endif %} {% assign rgbMin = 1.0 %} {% if rgbRed < rgbMin %} {% assign rgbMin = rgbRed %} {% endif %} {% if rgbGreen < rgbMin %} {% assign rgbMin = rgbGreen %} {% endif %} {% if rgbBlue < rgbMin %} {% assign rgbMin = rgbBlue %} {% endif %} {% if rgbRed <= 0.03928 %} {% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %} {% else %} {% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %} {% endif %} {% if rgbGreen <= 0.03928 %} {% assign lGreen = rgbGreen | divided_by: 12.92 | times: 0.7152 %} {% else %} {% assign lGreen = rgbGreen | times: 0.3053 | plus: 0.6822 | times: rgbGreen | plus: 0.0125 | times: rgbGreen | times: 0.7152 %} {% endif %} {% if rgbBlue <= 0.03928 %} {% assign lBlue = rgbBlue | divided_by: 12.92 | times: 0.0722 %} {% else %} {% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %} {% endif %} {% assign luminance = lRed | plus: lGreen | plus: lBlue %} {% if luminance >= 0.83 %} {% assign class = "grid-item--dark" %} {% else %} {% assign class = "grid-item--light" %} {% endif %} {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %} {% assign rgbDelta = rgbMax | minus: rgbMin %} {% if rgbDelta == 0 %} {% assign hslHue = 0 %} {% assign hslSaturation = 0 %} {% else %} {% if hslLuminance < 0.5 %} {% assign rgbMaxPlusMin = rgbMax | plus: rgbMin %} {% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbMaxPlusMin %} {% else %} {% assign rgbTwoMinusMaxMinusMin = 2 | minus: rgbMax | minus: rgbMin %} {% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbTwoMinusMaxMinusMin %} {% endif %} {% if rgbMax == rgbRed %} {% assign hslHue = rgbGreen | minus: rgbBlue | divided_by: rgbDelta | times: 60.0 | modulo: 360.0 %} {% elsif rgbMax == rgbGreen %} {% assign hslHue = rgbBlue | minus: rgbRed | divided_by: rgbDelta | plus: 2.0 | times: 60.0 | modulo: 360.0 %} {% else %} {% assign hslHue = rgbRed | minus: rgbGreen | divided_by: rgbDelta | plus: 4.0 | times: 60.0 | modulo: 360.0 %} {% endif %} {% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %} {% endif %} {% if hslSaturation < 10 %} {% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %} {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% else %} {% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %} {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% endif %} {% endfor %} {% assign iconsArray = iconsUnsortedString | split: ";" %} {% assign iconsArray = iconsArray | sort %} {% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %} {% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %} <!doctype html> <html lang="en-gb"> <head> <meta charset="utf-8"> <meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport"> <link rel="preconnect" href="//www.google-analytics.com"> <link rel="preconnect" href="//cdn.carbonads.com"> <link rel="preconnect" href="//github.com"> <title>Simple Icons</title> <meta name="description" content="Free SVG icons for popular brands."> <meta property="og:type" content="website"> <meta property="og:title" content="Simple Icons"> <meta property="og:description" content="Free SVG icons for popular brands."> <meta property="og:url" content="https://simpleicons.org"> <meta property="og:site_name" content="Simple Icons"> <meta property="og:image" content="https://simpleicons.org/images/og.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Simple Icons"> <meta name="twitter:description" content="Free SVG icons for popular brands."> <meta name="twitter:site" content="@bathtype"> <meta name="twitter:domain" content="Simple Icons"> <meta name="twitter:image:src" content="https://simpleicons.org/images/og.png"> <link rel="icon" type="image/x-icon" href="https://simpleicons.org/images/favicon.ico"> <link rel="icon" type="image/png" href="https://simpleicons.org/images/favicon.png"> <link rel="apple-touch-icon" href="https://simpleicons.org/images/apple-touch-icon.png"> <link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111"> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-97917186-1', 'auto'); ga('send', 'pageview'); </script> <script async src='https://www.google-analytics.com/analytics.js'></script> <style> * { box-sizing: border-box; } :root { font-size: 100%; } a { text-decoration: none; } abbr { text-decoration: none; } body { background-color: #FFFFFF; color: #263238; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 0.875rem; line-height: 1.5rem; margin: 0; } svg { fill: currentColor; height: 1.5rem; width: 1.5rem; } #carbonads { height: 100%; width: 100%; } #carbonads a { color: #263238; } #carbonads > span { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .carbon-img { display: block; padding: 1rem 1rem 0.5rem; } .carbon-text { display: block; font-size: 0.75rem; line-height: 1rem; margin: 0 auto; max-width: 15rem; } .carbon-poweredby { font-size: 0.625rem; font-weight: 700; line-height: 1.5rem; opacity: 0.25; text-transform: uppercase; } .footer { background-color: #EEE; padding: 1.5rem; } @media (min-width: 45rem) { .footer { display: flex; justify-content: space-between; padding: 3rem; } } .footer a { color: #263238; text-decoration: underline; } .footer p { margin: 0; opacity: 0.5; } a.share-button { background-color: #1DA1F2; border-radius: 0.125rem; color: #FFF; display: block; margin: 0.75rem 0 0; padding: 0.75rem 1.5rem; text-align: center; text-decoration: none; } @media (min-width: 45rem) { a.share-button { margin: 0; } } .hero { font-size: 1.5rem; line-height: 2rem; margin: 0; padding: 3rem 1.5rem 1.5rem; text-align: center; } @media (min-width: 45rem) { .hero { padding: 4.5rem 3rem 1.5rem; } } .search { margin: 1rem 1.5rem; text-align: center; } @media (min-width: 45rem) { .search { margin: 1rem 3rem; text-align: left; } } .search .search__wrapper { display: inline-block; position: relative; } .search .search__close { display: none; font-size: 1rem; padding: 6px 12px; position: absolute; right: 0; top: 1px; } .search .search__close span { cursor: pointer; } .search input { color: #333; font-size: 1rem; padding: 6px 12px; } @media (min-width: 45rem) { .search input { width: 250px; } } .search--active .search__close { display: block; } .search--active input { padding-right: 32px; } .grid { display: flex; flex-wrap: wrap; list-style: none; margin: 1.5rem; margin-top: 0; padding: 0; } @media (min-width: 45rem) { .grid { margin: 3rem; margin-top: 0; } } .grid.search__empty:after { content: 'No matching icons found.'; font-size: 1.25em; line-height: 1.5em; text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; } @supports (display: grid) { .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); grid-auto-rows: 6rem; grid-column-gap: 0.375rem; grid-row-gap: 0.375rem; grid-auto-flow: dense; } .grid.search__empty:after { grid-column: 1/span 2; } @media (min-width: 30.75rem) { .grid.search__empty:after { grid-column: 1/-3; } } } .grid-item { background-color: #757575; text-align: center; } .grid-item--light { color: #FFF; } .grid-item--dark { color: #222; } .grid-item__link { color: inherit; } @supports not (display: grid) { .grid-item { border: 0.1875rem solid #FFF; padding: 0 0 0.75rem; width: 20%; } } .grid-item--ad { background-color: #EEE; grid-column: -2 / -1; grid-row-end: span 2; height: auto; } @media (min-width: 21.75rem) { .grid-item--ad { grid-column: -3 / -1; } } @supports not (display: grid) { .grid-item--ad { width: 100%; } } .grid-item__link { display: block; padding: 1rem 1rem 0; text-align: center; width: 100%; } .grid-item__image { height: 1.5rem; width: 1.5rem; } .grid-item__title { font-size: 0.75rem; font-weight: 400; line-height: 1rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grid-item__subtitle { font-size: 0.75rem; line-height: 1rem; margin: 0; opacity: 0.5; } .navbar { background-color: #263238; } .navbar__nav { display: flex; list-style: none; margin: 0; padding: 0; } @media (min-width: 45rem) { .navbar__nav { padding: 0 1.5rem; } } .navbar__nav-item a { color: #FFF; display: block; opacity: 0.5; padding: 1.5rem 0.375rem; } .navbar__nav-item a:focus, .navbar__nav-item a:hover { opacity: 1; } .navbar__nav-item:last-child a { padding: 1.5rem 1.5rem 1.5rem 0.375rem; } .navbar__nav-item--home { flex-grow: 1; } .navbar__nav-item--home a { opacity: 1; padding: 1.5rem 0 1.5rem 1.5rem; } .hidden { display: none; } </style> </head> <body> <header class="navbar" role="banner"> <ul class="navbar__nav" role="navigation"> <li class="navbar__nav-item navbar__nav-item--home"><a href="/">Simple Icons</a></li> <li class="navbar__nav-item"><a href="https://github.com/danleech/simple-icons/blob/master/README.md">About</a></li> <li class="navbar__nav-item"><a href="https://github.com/danleech/simple-icons">GitHub</a></li> </ul> </header> <main role="main"> <p class="hero">Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular brands</p> <div class="search"> <div class="search__wrapper"> <div class="search__close"><span>×</span></div> <input type="text" placeholder="Search by brand …" /> </div> </div> <ul class="grid"> <li class="grid-item grid-item--ad"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script> </li> {% for icon in iconsArray %} {% assign iconArray = icon | split: "," %} <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}"> <a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download> {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %} <h2 class="grid-item__title">{{ iconArray[5] }}</h2> </a> <p class="grid-item__subtitle">#{{ iconArray[4] }}</p> </li> {% endfor %} {% for icon in greyscaleIconsArray %} {% assign iconArray = icon | split: "," %} <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}"> <a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download> {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %} <h2 class="grid-item__title">{{ iconArray[5] }}</h2> </a> <p class="grid-item__subtitle">#{{ iconArray[4] }}</p> </li> {% endfor %} </ul> </main> <footer class="footer" role="contentinfo"> <p>A <a href="https://github.com/danleech/simple-icons/blob/master/LICENSE.md">CC0</a> project maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>.<br> Use <a href="https://github.com/danleech/simple-icons">GitHub</a> for requests, corrections and contributions.</p> <a class="share-button" href="https://twitter.com/share?url=https%3A%2F%2Fsimpleicons.org&via=bathtype&text=Simple%20Icons%3A%20free%20SVG%20icons%20for%20popular%20brands.">Share this on Twitter!</a> </footer> {% assign allIconNames = "" %} {% for icon in iconsArray %} {% assign iconArray = icon | split: "," %} {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[3] }}",{% endcapture %} {% endfor %} {% for icon in greyscaleIconsArray %} {% assign iconArray = icon | split: "," %} {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[1] }}"{% unless forloop.last %},{% endunless %}{% endcapture %} {% endfor %} <script type="text/javascript"> (function(document) { var icons = [{{ allIconNames }}].map(normalizeSearchTerm), $grid = document.querySelector('.grid'), $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'), $search = document.querySelector('.search'), $searchClose = $search.querySelector('.search__close'), $searchInput = $search.querySelector('input'); // include a modified debounce underscorejs helper function. // see // - http://underscorejs.org/docs/underscore.html#section-83 // - http://underscorejs.org/#debounce function debounce(func, wait, immediate) { var timeout, args, context, timestamp, result; var later = function() { var last = +new Date - timestamp; if (last < wait && last >= 0) { timeout = setTimeout(later, wait - last); } else { timeout = null; if (!immediate) { result = func.apply(context, args); if (!timeout) context = args = null; } } }; return function() { context = this; args = arguments; timestamp = +new Date; var callNow = immediate && !timeout; if (!timeout) timeout = setTimeout(later, wait); if (callNow) { result = func.apply(context, args); context = args = null; } return result; }; } function search(value) { var hiddenCounter = 0, value = normalizeSearchTerm(value); icons.forEach(function(e, i) { if (e.indexOf(value) > -1) { $icons[i].classList.remove('hidden'); } else { hiddenCounter++; $icons[i].classList.add('hidden'); } }) $grid.classList.toggle('search__empty', hiddenCounter == icons.length); } function normalizeSearchTerm(value) { return value.toLowerCase().replace(/ /g, ''); } $search.addEventListener('input', debounce(function(e) { e.preventDefault(); var value = e.target.value; if (value) { $search.classList.add('search--active'); } else { $search.classList.remove('search--active'); } search(value); }, 50), false); $searchClose.addEventListener('click', function(e) { e.stopPropagation(); $searchInput.value = ''; $search.classList.remove('search--active'); search(''); }, false); })( document ); </script> </body> </html>