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 %}
    {% 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 }}{% 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 }}{% 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-97917186-1', 'auto');
        ga('send', 'pageview');
    </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 {
            height: 1.5rem;
            width: 1.5rem;
        }

        path, rect, circle {
            fill: #FFF;
        }

        #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;
            }
        }

        .grid {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 1.5rem;
            padding: 0;
        }
        @media (min-width: 45rem) {
            .grid {
                margin: 3rem;
            }
        }
        @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-item {
            background-color: #757575;
            text-align: center;
        }
        @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 {
            color: #FFFFFF;
            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 {
            color: #FFFFFF;
            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;
        }
    </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/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&nbsp;brands</p>
        <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" 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" 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&nbsp;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>
</body>
</html>