2017-04-23 18:31:56 +02:00
---
---
2017-04-26 19:43:58 +02:00
{% assign iconsUnsortedString = "" %}
{% assign greyscaleIconsUnsortedString = "" %}
{% for icon in site.data.simple-icons.icons %}
{% assign title = icon.title %}
2018-07-20 20:55:35 +02:00
{% assign filename = icon.title | replace: "+", "plus" | replace: " ", "" | replace: ".", "-dot-" | replace: "!", "" | replace: "’", "" | downcase %}
2017-04-26 19:43:58 +02:00
{% 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 %}
2017-12-21 23:32:01 +02:00
2017-04-26 19:43:58 +02:00
{% 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 %}
2017-12-21 23:32:01 +02:00
2017-04-26 19:43:58 +02:00
{% 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 %}
2017-08-02 15:43:02 +02:00
{% 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 %}
2017-08-02 15:48:58 +02:00
{% assign luminance = lRed | plus: lGreen | plus: lBlue %}
{% if luminance >= 0.83 %}
2017-08-03 13:13:31 +02:00
{% assign class = "grid-item--dark" %}
2017-08-02 15:43:02 +02:00
{% else %}
2017-08-03 13:13:31 +02:00
{% assign class = "grid-item--light" %}
2017-08-02 15:43:02 +02:00
{% endif %}
2017-04-26 19:43:58 +02:00
{% 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 %}
2017-12-21 23:32:01 +02:00
2017-04-26 19:43:58 +02:00
{% if hslSaturation < 10 % }
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
2017-12-21 23:32:01 +02:00
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
2017-04-26 19:43:58 +02:00
{% else %}
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
2017-12-21 23:32:01 +02:00
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
2017-04-26 19:43:58 +02:00
{% endif %}
{% endfor %}
2018-01-03 19:33:25 +02:00
2017-12-21 23:32:01 +02:00
{% assign iconsArray = iconsUnsortedString | split: ";" | sort %}
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse %}
2017-04-26 19:43:58 +02:00
2018-01-03 19:33:25 +02:00
{% 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 %}
2017-04-26 19:43:58 +02:00
<!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 >
2017-05-03 15:22:18 +02:00
< meta name = "description" content = "Free SVG icons for popular brands." >
2017-04-26 19:43:58 +02:00
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Simple Icons" >
2017-05-03 15:22:18 +02:00
< meta property = "og:description" content = "Free SVG icons for popular brands." >
2017-04-26 19:43:58 +02:00
< 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" >
2017-05-03 15:22:18 +02:00
< meta name = "twitter:description" content = "Free SVG icons for popular brands." >
2017-04-26 19:43:58 +02:00
< 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" >
2018-01-03 19:33:25 +02:00
< link rel = "stylesheet" href = "stylesheet.css" type = "text/css" >
2017-05-25 21:32:36 +02:00
< script >
2017-09-11 21:23:20 +02:00
(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');
2017-05-25 21:32:36 +02:00
< / script >
2018-01-03 19:33:25 +02:00
< script >
function normalizeSearchTerm(value) {
return value.toLowerCase().replace(/ /g, '');
}
var icons = [{{ allIconNames }}].map(normalizeSearchTerm);
< / script >
2017-04-26 19:43:58 +02:00
< / 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 >
2017-09-11 21:25:34 +02:00
< 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 >
2017-09-20 10:24:28 +02:00
< li class = "navbar__nav-item" > < a href = "https://www.npmjs.com/package/simple-icons" > NPM< / a > < / li >
2017-04-26 19:43:58 +02:00
< / ul >
< / header >
< main role = "main" >
2017-05-03 15:22:18 +02:00
< p class = "hero" > Free < abbr title = "Scalable Vector Graphic" > SVG< / abbr > icons for popular brands< / p >
2017-05-26 01:04:23 +02:00
< div class = "search" >
< div class = "search__wrapper" >
< div class = "search__close" > < span > × < / span > < / div >
2017-10-17 21:15:07 +02:00
< input type = "text" placeholder = "Search by brand …" title = "Search not available when JavaScript is disabled" disabled / >
2017-05-26 01:04:23 +02:00
< / div >
2017-12-21 23:54:11 +02:00
2017-12-23 11:44:29 +02:00
< svg id = "sort-color" class = "sort-btn active" aria-labelledby = "sort-color" role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title id = "sort-color" > Sort by color< / title > < path d = "M9.219 18.857H6.648V.429A.414.414 0 0 0 6.219 0H3.648a.418.418 0 0 0-.308.121.418.418 0 0 0-.121.308v18.428H.648a.4.4 0 0 0-.402.268c-.071.17-.04.326.094.469l4.286 4.287c.098.08.2.119.308.119a.447.447 0 0 0 .308-.119l4.272-4.273a.506.506 0 0 0 .134-.32.417.417 0 0 0-.429-.431z" / > < path d = "M12.219 3.429h3.429A.412.412 0 0 0 16.076 3V.429A.416.416 0 0 0 15.648 0h-3.429a.414.414 0 0 0-.429.429V3a.414.414 0 0 0 .429.429z" / > < path d = "M12.219 10.286h6a.42.42 0 0 0 .309-.12.42.42 0 0 0 .121-.308V7.286a.418.418 0 0 0-.121-.308.417.417 0 0 0-.309-.121h-6a.414.414 0 0 0-.308.121.417.417 0 0 0-.12.308v2.572c0 .125.04.228.12.308a.42.42 0 0 0 .308.12z" / > < path d = "M12.219 17.143h8.572c.125 0 .229-.039.309-.119s.119-.184.119-.309v-2.572c0-.125-.039-.227-.119-.307s-.184-.121-.309-.121h-8.572a.418.418 0 0 0-.308.121.415.415 0 0 0-.12.307v2.572c0 .125.04.229.12.309.081.08.183.119.308.119z" / > < path d = "M23.67 20.693a.408.408 0 0 0-.307-.121H12.219a.416.416 0 0 0-.429.428v2.572c0 .125.04.227.121.309a.42.42 0 0 0 .308.119h11.144a.414.414 0 0 0 .307-.119.424.424 0 0 0 .121-.309V21a.416.416 0 0 0-.121-.307z" / > < / svg >
2017-12-23 00:20:01 +02:00
< svg id = "sort-alphabetically" class = "sort-btn" aria-labelledby = "sort-alphabetically" role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title id = "sort-alphabetically" > Sort alphabetically< / title > < path d = "M10.096 18.857H7.525V.429A.414.414 0 0 0 7.096 0H4.525a.414.414 0 0 0-.429.429v18.429H1.525c-.196 0-.331.089-.402.268-.072.17-.04.326.094.469l4.286 4.286c.098.079.2.119.308.119.116 0 .219-.04.308-.12l4.272-4.272a.506.506 0 0 0 .134-.321.414.414 0 0 0-.429-.43z" / > < path d = "M20.102 22.474H16.78c-.188 0-.322.009-.402.026l-.188.026V22.5l.148-.147c.133-.16.227-.276.281-.348l4.941-7.099v-1.191h-7.594v3.066h1.607v-1.54h3.107c.16 0 .295-.014.4-.04a.856.856 0 0 0 .102-.007c.039-.004.068-.007.086-.007v.04l-.146.121c-.08.08-.176.2-.281.361L13.9 22.795V24h7.82v-3.12h-1.619v1.594h.001z" / > < path d = "M21.977 8.866L18.895 0h-2.168l-3.082 8.866h-.936v1.419h3.842V8.866h-1.004l.631-1.929h3.254l.629 1.929h-1.004v1.419h3.857V8.866h-.937zm-5.358-3.402l.977-2.92c.037-.107.07-.236.102-.388s.047-.232.047-.241l.039-.268h.055c0 .036.008.125.025.268l.162.629.963 2.92h-2.37z" / > < / svg >
2017-05-26 01:04:23 +02:00
< / div >
2017-04-26 19:43:58 +02:00
< ul class = "grid" >
< li class = "grid-item grid-item--ad" >
2018-05-22 22:32:23 +02:00
< script async type = "text/javascript" src = "//cdn.carbonads.com/carbon.js?serve=CKYIPK7M&placement=simpleiconsorg" id = "_carbonads_js" > < / script >
2017-04-26 19:43:58 +02:00
< / li >
{% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %}
2017-12-21 23:54:11 +02:00
< li class = "grid-item {{ iconArray[6] }}" style = "background-color: #{{ iconArray[4] }}" order = "{{ iconArray[7] }}" >
2017-04-28 00:12:22 +02:00
< a class = "grid-item__link" href = "/icons/{{ iconArray[3] }}.svg" download >
2017-04-26 21:09:03 +02:00
{% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
2017-04-26 19:43:58 +02:00
< h2 class = "grid-item__title" > {{ iconArray[5] }}< / h2 >
< / a >
2017-12-21 23:54:11 +02:00
< p class = "grid-item__subtitle" > #{{ iconArray[4] }}< / p >
2017-04-26 19:43:58 +02:00
< / li >
{% endfor %}
{% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %}
2017-12-21 23:54:11 +02:00
< li class = "grid-item {{ iconArray[6] }}" style = "background-color: #{{ iconArray[4] }}" order = "{{ iconArray[7] }}" >
2017-04-28 00:12:22 +02:00
< a class = "grid-item__link" href = "/icons/{{ iconArray[1] }}.svg" download >
2017-04-26 21:09:03 +02:00
{% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
2017-04-26 19:43:58 +02:00
< h2 class = "grid-item__title" > {{ iconArray[5] }}< / h2 >
< / a >
2017-12-21 23:54:11 +02:00
< p class = "grid-item__subtitle" > #{{ iconArray[4] }}< / p >
2017-04-26 19:43:58 +02:00
< / li >
{% endfor %}
< / ul >
< / main >
< footer class = "footer" role = "contentinfo" >
2017-09-11 21:25:34 +02:00
< 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 Icons Contributors< / a > .< br >
Use < a href = "https://github.com/simple-icons/simple-icons" > GitHub< / a > for requests, corrections and contributions.< / p >
2017-05-03 15:22:18 +02:00
< 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 >
2017-04-26 19:43:58 +02:00
< / footer >
2018-01-03 19:33:25 +02:00
< script type = "text/javascript" src = "site_script.js" > < / script >
2017-04-26 19:43:58 +02:00
< / body >
< / html >