index.html

---
title: Gorgeous SVG logos, perfect for your README or credits page
no_h1: true
redirect_from:
- /util/index.html
- /search.html
---
{%- comment %}NOTE: this is random at *build time*, so a given deploy will always have the same set of logos (which is the desired result) {% endcomment %}
{%- assign sorted_pages = site.pages | where_exp:"item","item.logohandle" | sort:'sort' %}
{%- assign all = "" | split: '' %}
{%- for logopage in sorted_pages %}
	{%- capture logofile %}{{ logopage.logohandle }}{{ '-ar21.svg' }}{% endcapture -%}
	{%- if logopage.noindex %}{% else %}
		{%- if logopage.images contains logofile %}
			{%- assign all = all | push: logopage.logohandle %}
		{%- endif %}
	{%- endif %}
{%- endfor %}
{%- assign default_logos = all | sample: 72 -%}

<div class="jumbotron jumbotron-fluid bg-transparent pb-0 pt-2">
	<div class="container px-0">
		<h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img alt="VectorLogoZone logo" src="/images/about/vlzlogo-grey.svg" style="max-width: 100%;object-fit: contain;"/></a></h1>
		<p class="lead d-flex justify-content-center" style="font-size:1.75rem;">3,000+ gorgeous SVG logos, perfect for your README or credits page</p>
	</div>
</div>

<noscript>
	<div class="alert alert-info" role="alert">
		You have disabled JavaScript.  While pages will display properly, the search function relies on JavaScript.<br/
		<br/><br/>
		Please use <a class="alert-link" href="https://logosear.ch/">LogoSearch</a> or browse the <a class="alert-link" href="/logos/index.html">A-Z index</a> to find logos.
	</div>
	<div class="row" id="default_div">
		<div class="col logo-container">
			{%- for theLogoHandle in default_logos %}
			<a href="/logos/{{theLogoHandle}}/index.html" title="{{theLogoHandle}}"><img class="ar21"
					alt="{{theLogoHandle}}" src="/logos/{{theLogoHandle}}/{{theLogoHandle}}-ar21.svg" /></a>
			{%- endfor %}
		</div>
	</div>
</noscript>

<div class="row scriptonly" id="wait">
	<div class="col">
		<div class="alert alert-info" role="alert">
			<img alt="Loading..." class="float-start" src="/images/spinner.svg" style="height:64px;width:64px;" />
			Please wait...  If you have JavaScript disabled or 
			the index never finishes loading, please try 
			<ul>
				<li><a class="alert-link" href="javascript:location.reload();">Reloading this page</a> - only if you have JavaScript enabled</li>
				<li>Browsing the <a class="alert-link" href="/logos/index.html">A-Z list</a> - works without JavaScript, but so many SVGs can crash your browser</li>
				<li>Searching with <a class="alert-link" href="https://logosear.ch/">LogoSearch</a> - works without JavaScript</li>
				<li>Letting me know via the <a class="alert-link" href="/support/contact.html">contact page</a></li>
			</ul>
		</div>
	</div>
</div>

<form action="" method="get" class="form-inline justify-content-center noscript" id="site_search" style="display:none;">
	<div class="form-row align-items-center" style="padding-bottom:20px;">
		<div class="col-auto">
			<label class="sr-only" for="q">Search query</label>
			<div class="input-group">
				<input autocomplete="off" autofocus="autofocus" class="form-control" id="q" name="q" placeholder="Search terms" type="text"/>
				<div class="input-group-append">
					<button type="submit" class="btn" style="background-color:#1d8286;color:white;font-weight:bold;">Search</button>
				</div>
			</div>
		</div>
	</div>
</form>

<div class="row clearfix">
	<div class="logo-container" id="search_results"></div>
</div>

<div class="row clearfix mt-3">
	<div class="col">
		<p id="pending-tip" class="alert alert-primary" style="display:none;">The following logos are on the &quot;To Do&quot; list and should be ready shortly.</p>
		<ul id="pending"></ul>
	</div>
</div>
<script src="/js/lunr.min.js"></script>
<script>
/*<![CDATA[*/
$(function() {
	// Initalize lunr with the fields it will be searching on. I've given title
	// a boost of 10 to indicate matches on this field are more important.
	lunr.tokenizer.seperator = /[\s\-_\.]+/
	window.idx = lunr(function () {
			this.field('id');
			this.field('title', { boost: 10 });
			this.field('keywords');
			this.field('website');
			this.field('category');
		});
	window.idx.pipeline.remove(lunr.stopWordFilter);

	window.default_logos = [{%- for logohandle in default_logos %} "{{logohandle}}"{% unless forloop.last %},{% endunless %}{%- endfor %} ];

	// Download the data from the JSON file we generated
	window.data = $.getJSON('/util/fulltext.json?version={{site.time | date_to_xmlschema | url_encode }}');

	// Wait for the data to load and add it to lunr
	window.data.then(function(loaded_data){
		$.each(loaded_data, function(index, value){
			window.idx.add($.extend({ "id": index }, value));
		});
		console.log("data loaded");
		$("#wait").hide();
		$("#site_search").show();
		show_default();
	});

	var doSearch = function(query)
	{
		if (!query || query.length == 0)
		{
			$("#search_results").empty();
			$("#pending").empty();
			$("#pending-tip").css('display', 'none');
			show_default();
			return;
		}
		console.log("searching for " + query);
		var results = window.idx.search(query);
		display_search_results(query, results);
		return false;
	};

	$("#q").on('input propertychange paste', function() {
		console.log("input paste");
		var previousQuery = getParameterByName("q");
		var query = $("#q").val();
		if (query && previousQuery && query.length > 0 && previousQuery.length > 0 && (query.startsWith(previousQuery) || previousQuery.startsWith(query))) {
			history.replaceState({ "q": query}, "", "?q=" + query);
		}
		else {
			history.pushState({"q": query}, "", "?q=" + query);
		}
		document.title = "Search logos for '" + query + "'";
		doSearch(query);
	});

	$("#q").on('xpropertychange', function() {
		console.log("propertychange");
		var query = $("#q").val();
		doSearch(query);
	});

	// Event when the form is submitted
	$("#site_search").submit(function() {
		doSearch($("#q").val());
		return false;
	});

	$(window).on("popstate", function(event) {
		console.log("popstate");
		if (event.originalEvent.state)
		{
			var query = event.originalEvent.state["q"];
			$("#q").val(query);
			doSearch(query);
		}
		else
		{
			$("#q").val("");
			$("#search_results").empty();
		}
	});

	function getParameterByName(name) {
		var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
		return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
	}

	function htmlEncode(value){
		return $("<div>").text(value).html();
	}

	var query = getParameterByName("q");
	if (query && query.length)
	{
		window.data.then(function() {
			console.log("initial query");
			$("#q").val(query);
			doSearch(query);
		});
	}

	function display_search_results(query, results) {
		var $search_results = $("#search_results");
		var $pending = $("#pending");
		$search_results.empty(); // Clear any old results
		$pending.empty();
		$("#pending-tip").css("display",'none');

		// Wait for data to load
		window.data.then(function(loaded_data) {

			if (window.ga) {
				ga('send', {
					hitType: 'event',
					eventCategory: 'search-vlz',
					eventAction: query,
					eventValue: results.length ? results.length : 0
				});
			}

			// Are there any results?
			if (results.length)
			{

				if (results.length > 50) {
					results.length = 50;
				}

				// Iterate over the results
				results.forEach(function(result) {
						var item = loaded_data[result.ref];

						if (item.haslogo) {
							// Build a snippet of HTML for this result
							var appendString = '<a href="/logos/' + result.ref + '/index.html" title="' + htmlEncode(item.title) + '"><img class="ar21" alt="' + htmlEncode(item.title) + '" src="/logos/' + result.ref + '/' + result.ref + '-ar21.svg" /></a></li>';

							// Add it to the results
							$search_results.append(appendString);
						}
						else {
							$pending.append($("<li>").append($("<a>").text(item.title).attr("href", "/logos/" + result.ref + "/index.html")));
						}
					});
				$("#pending-tip").css("display", $pending.children().length > 0 ? "block" : "none");
			}
			else
			{
				$search_results.html('<div class="alert alert-warning">No results found for "' + htmlEncode(query) + '".  Try searching at <a href="https://logosear.ch/search.html?q=' + encodeURIComponent(query) + '">Logo Search</a>!</div>');
			}
		});
	}

	function show_default() {
		console.log("showing defaults");
		var $search_results = $("#search_results");
		for (var loop = 0; loop < default_logos.length; loop++) {
			var logohandle = default_logos[loop];
			var appendString = '<a href="/logos/' + logohandle + '/index.html" title="' + htmlEncode(logohandle) + '"><img class="ar21" alt="' + htmlEncode(logohandle) + '" src="/logos/' + logohandle + '/' + logohandle + '-ar21.svg" /></a></li>';

			// Add it to the results
			$search_results.append(appendString);
		}
	}
});
/*]]>*/
</script>