simple-icons/index.html

---
---

{% 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>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-100751516-2', 'auto');
      ga('send', 'pageview');
    </script>
    <style>
        * {
            box-sizing: border-box;
        }

        :root {
            font-size: 100%;
            height: 100%;
        }

        a {
            text-decoration: none;
        }

        abbr {
            text-decoration: none;
        }

        body {
            background-color: #FFFFFF;
            display: flex;
            flex-direction: column;
            color: #263238;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            font-size: 0.875rem;
            height: 100%;
            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;
            margin-top: auto;
            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&nbsp;Icons</a></li>
            <li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons/blob/develop/README.md">About</a></li>
            <li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons">GitHub</a></li>
        </ul>
    </header>
    <main role="main">
        <p class="hero">Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular&nbsp;brands</p>
        <div class="search">
            <div class="search__wrapper">
                <div class="search__close"><span>&times;</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&amp;serve=CVYD42T&amp;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/simple-icons/simple-icons/blob/develop/LICENSE.md">CC0</a> project maintained by the <a href="https://github.com/simple-icons/simple-icons/graphs/contributors">Simple&nbsp;Icons&nbsp;Contributors</a>.<br>
            Use <a href="https://github.com/simple-icons/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>