ageddesi/Mocked-API

Need New SVG Icons

ageddesi opened this issue · 12 comments

As we gather more categories, the HeroIcons I am using are not covering all of them, so we need to spend time creating our own icons for the main website

image

hi @ageddesi what icons are currently using

We are currently using heroicons

have you tried fontawesome . it has a large collection of icons
https://fontawesome.com/search

hi @ageddesi
where can i find code for this page , i looked in this repo but couldn't find it
it would be easier to match with the code imo

Sadly its in another private repo. If you want to update it you can just provide the code.

This is the code as it is (uses tailwind)

<div class="max-w-4xl mx-auto px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:pt-24 lg:px-8">
				<h2 class="text-3xl font-bold text-white tracking-tight">We are still working towards our v1.0 release</h2>
				<p class="mt-4 max-w-3xl text-lg text-purple-200">In the meantime you can use our api anytime but until v1.0 is released breaking API changes can occcur. However we are trying our best to not have any happen (but we are only human). <br/>For our full api docs head over to <a class="underline text-white hover:text-pink-400" href="https://api.mocked-api.dev">api.mocked-api.dev</a> or click on a category below</p>
				<h2 class="text-xl text-white tracking-tight mt-8">Current Release : <span class="text-pink-400">0.13.0</span> | Categories: <span class="text-pink-400">22</span> | Endpoints: <span class="text-pink-400">80</span> </h2>
				<div class="mt-12 grid grid-cols-3 gap-x-6 gap-y-12 sm:grid-cols-4 lg:mt-16 lg:grid-cols-8 lg:gap-x-8 lg:gap-y-16">
				<div>
					<a href="https://api.mocked-api.dev/#/Animals" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<!-- Heroicon name: outline/inbox -->
								<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
								</svg>
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Animals</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/BankFeed" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Bank Feed</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Chat" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<!-- Heroicon name: outline/chat -->
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Chat</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Colors" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Colors</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Countries" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<!-- Heroicon name: outline/users -->
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
								</svg>
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Countries</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Currencies" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
								  </svg>								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Currencies</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Ecommerce" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
								  </svg>																
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Ecommerce</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Elements" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
								  </svg>																
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Elements</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Emails" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
								  </svg>																
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Emails</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Images" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<!-- Heroicon name: outline/trash -->
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
								</svg>
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Images</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Invoice" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Invoice</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/IP" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">IP</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Music" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Music</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Names" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<!-- Heroicon name: outline/pencil-alt -->
								<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
								<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
								</svg>
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Names</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/PhoneNumbers" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
								  </svg>
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Phone Numbers</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Products" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
								  </svg>
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Products</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Quotes" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Quotes</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Socials" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
								  </svg>
								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Socials</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Sports" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<!-- Heroicon name: outline/pencil-alt -->
								<svg class="h-6 w-6 text-white" stroke="currentColor" stroke-width="2"  id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
									<path d="M19.638,28.571a1,1,0,0,0,.643-1.259l-2.106-6.5L24,16.576l5.824,4.236L28.559,24.7a1,1,0,1,0,1.9.619l1.354-4.16,4.757-2.13,5.387,3.908a17.648,17.648,0,0,1-.989,5.045,1,1,0,0,0,1.883.676,19.635,19.635,0,0,0,1.136-6.143C44,22.343,44,22.171,44,22A20.028,20.028,0,0,0,30.635,3.138,19.984,19.984,0,0,0,8.116,9.862,19.8,19.8,0,0,0,4,22c0,.171,0,.343.01.471a19.763,19.763,0,0,0,1.022,5.877,1,1,0,1,0,1.9-.635,17.828,17.828,0,0,1-.888-4.774l5.389-3.91,4.756,2.13,2.194,6.77a1,1,0,0,0,1.259.642Zm19.771-15.84a17.733,17.733,0,0,1,2.523,7.716L37.865,17.5ZM37.97,10.682l-2.094,6.467L31.118,19.28,25,14.831V9.169L30.446,5.21A17.8,17.8,0,0,1,37.97,10.682Zm-9.918-6.2L24,7.424,19.948,4.478A18.057,18.057,0,0,1,28.052,4.478Zm-10.5.732L23,9.169v5.662L16.882,19.28l-4.758-2.131L10.03,10.682A17.8,17.8,0,0,1,17.554,5.21ZM6.068,20.447a17.738,17.738,0,0,1,2.523-7.716L10.135,17.5Z"/>
									<path d="M45.278,35.038A20.15,20.15,0,0,0,30,28a19.922,19.922,0,0,0-11.021,3.306,1,1,0,1,0,1.1,1.668c.1-.068.208-.125.311-.19a14.905,14.905,0,0,1-.007,8.451.993.993,0,0,0-.987,1.722A19.9,19.9,0,0,0,30,46a20.154,20.154,0,0,0,15.281-7.041A3.042,3.042,0,0,0,45.278,35.038ZM22.169,42.2a16.675,16.675,0,0,0,0-10.4,17.952,17.952,0,0,1,15.664.007,16.679,16.679,0,0,0,0,10.4,17.91,17.91,0,0,1-15.661,0Zm21.593-4.541a18.287,18.287,0,0,1-4.155,3.555,14.921,14.921,0,0,1,0-8.425,18.267,18.267,0,0,1,4.152,3.553A1.022,1.022,0,0,1,43.762,37.657Z"/><path d="M34,36H33v-.5a1,1,0,0,0-2,0V36H29v-.5a1,1,0,0,0-2,0V36H26a1,1,0,0,0,0,2h1v.5a1,1,0,0,0,2,0V38h2v.5a1,1,0,0,0,2,0V38h1a1,1,0,0,0,0-2Z"/>
									<path d="M10.5,30A7.5,7.5,0,1,0,18,37.5,7.508,7.508,0,0,0,10.5,30Zm-.435,2.022a5.447,5.447,0,0,1-5.043,5.043A5.5,5.5,0,0,1,10.065,32.022ZM5.229,39.059a7.45,7.45,0,0,0,6.824-6.832,5.517,5.517,0,0,1,3.72,3.721,7.435,7.435,0,0,0-6.826,6.825A5.518,5.518,0,0,1,5.229,39.059Zm5.706,3.919a5.451,5.451,0,0,1,5.043-5.045A5.5,5.5,0,0,1,10.935,42.978Z"/>
								</svg>
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Sports</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/TimeZones" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
								</svg>								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Time Zones</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Users" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
								</svg>								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Users</h3>
						</div>
					</a>
				</div>

				<div>
					<a href="https://api.mocked-api.dev/#/Vehicles" target="_blank" class="flex flex-col items-center">
						<div>
							<span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10 hover:bg-pink-400 hover:scale-150">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
									<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
								</svg>								  
							</span>
						</div>
						<div class="mt-6">
							<h3 class="text-lg font-medium text-white">Vehicles</h3>
						</div>
					</a>
				</div>


				</div>
			</div>

I love these icons, shame about the price. https://myicons.co/

https://react-icons.github.io/react-icons/
This covers all the different popular icons in one package. Everything from bootstrap to material UI to font-awesome

Hi!, is this issue resolved? Else I would like to work on this

Hi @NNL-Keerthana This has not bee resolved, you can see from the code above how the html needs to be laid out. I just need new SVGs added.

Hi @NNL-Keerthana This has not bee resolved, you can see from the code above how the html needs to be laid out. I just need new SVGs added.

Hi, I did change some icons. How should I send the code just comment here or PR???

If you can make a gist and then link to that would be best :) 👍 @NNL-Keerthana