<?php
$icons_path = __DIR__."/icons";
$files = scandir($icons_path);
$files = array_filter($files, function ($file) {
return (substr($file, -4, 4) == ".svg");
});
$files = array_map(function ($file) {
return str_replace(".svg", "", $file);
}, $files);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Pixel Icons" />
<meta property="og:url" content="https://sqkhor.com/pixel-icons/" />
<meta property="og:image" content="https://sqkhor.com/pixel-icons/cover3.png" />
<meta property="og:description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<title>Pixel Icons</title>
<meta name="description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<link rel="shortcut icon" href="./favicon.png" type="image/png" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5K34EE24W"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5K34EE24W');
</script>
<script type="module" crossorigin src="./assets/index.js"></script>
<link rel="stylesheet" href="./assets/index.css">
</head>
<body>
<div id="wrapper">
<header>
<!-- <h1>Pixel Icons</h1> -->
<svg id="site-title" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 60"><path d="M40 30H10V10h30V0H0v60h10V40h40V10H40zM60 0h10v10H60zM60 20h10v40H60zM90 40h10v10H90zM90 20h10v10H90zM100 30h10v10h-10zM110 40h10v10h-10zM120 50h10v10h-10zM110 20h10v10h-10zM120 10h10v10h-10zM80 10h10v10H80zM80 50h10v10H80zM150 50h30v10h-30zM150 10h30v10h-30zM180 30h-30V20h-10v30h10V40h40V20h-10zM200 0h10v50h-10zM210 50h10v10h-10zM270 0h10v60h-10zM290 20h10v30h-10zM300 10h30v10h-30zM300 50h30v10h-30zM340 20h10v30h-10zM380 20h10v30h-10zM350 10h30v10h-30zM350 50h30v10h-30zM400 20h10v40h-10zM430 20h10v40h-10zM410 10h20v10h-20zM460 30h20v10h-20zM450 20h10v10h-10zM480 40h10v10h-10zM460 10h30v10h-30zM450 50h30v10h-30z"/></svg>
<div class="buttons">
<div class="pill"><a class="button" href="./download.php?icon=all" target="_blank">Download All</a></div>
<div class="pill"><a class="button" href="https://github.com/shuqikhor/pixel-icons" target="_blank">GitHub</a></div>
<div class="pill">
<button class="button" id="btn-theme">
<img class="theme-icon" src="./icons/sun.svg" alt="Light">
<img class="theme-icon" src="./icons/moon.svg" alt="Dark">
</button>
</div>
</div>
</header>
<div id="introduction">
<p><?= count($files) ?> pixel-perfect icons, free to use for all your projects!</p>
<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, saved in SVG vector format.</p>
<p>To download, please click the icons you want, or click the [Download All] button above.</p>
</div>
<div id="root">
<div class="pixel-input">
<input type='text' id='search' placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
</div>
<div id='display-options'>
<input type="checkbox" name="checkShowName" id='checkShowName' />
<label htmlFor="checkShowName">Display icon names</label>
</div>
<ul class="icon-list">
<?php foreach ($files as $file): ?>
<li>
<a href="https://sqkhor.com/pixel-icons/<?= $file ?>"><img class='icon' src="./icons/<?= $file ?>.svg"></a>
<div class="name"><?= $file ?></div>
</li>
<?php endforeach ?>
</ul>
</div>
<footer>
<p>
Made by <a href="https://sqkhor.com" target="_blank">Shuqi Khor</a>
<br>Please follow <a href="https://www.facebook.com/9x9.pixel.icons" target="_blank">Pixel Icons Facebook Page</a>
</p>
</footer>
</div>
<script>
(function () {
if (document.cookie.indexOf('theme=') !== -1) {
const themeCode = document.cookie.substr(document.cookie.indexOf('theme=') + 6, 1);
light = themeCode==1?true:false;
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
//OS theme setting detected as dark
light = false;
}
document.documentElement.dataset.theme = light ? 'light' : 'dark';
document.querySelector('#btn-theme').addEventListener('click', e => {
light = !light;
document.cookie = `theme=${light?1:0}; expires=Thu, 31 Dec 2100 00:00:00 UTC; path=/pixel-icons`;
document.documentElement.dataset.theme = light ? 'light' : 'dark';
});
})()
</script>
</body>
</html>