Skip to content

Instantly share code, notes, and snippets.

@LintangWisesa

LintangWisesa/devicon-tutor.html

Created January 7, 2024 02:35
Show Gist options
  • Save LintangWisesa/67c44795c0d287444b2bd886520d99cb to your computer and use it in GitHub Desktop.
Save LintangWisesa/67c44795c0d287444b2bd886520d99cb to your computer and use it in GitHub Desktop.
Download ZIP
Devicon Tutorial
Raw
devicon-tutor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Devicon Tutorial</title>
<!-- Devicon CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
<!-- Devicon local -->
<!-- <link rel="stylesheet" href="devicon/devicon-base.css" type="text/css"/> -->
<link rel="stylesheet" href="devicon/devicon.min.css" type="text/css"/>
</head>
<body>
<h1>Devicon Tutorial</h1>
<!-- devicon webfont -->
<h3>1. Devicon Webfont</h3>
<i class="devicon-googlecloud-plain"></i>
<i class="devicon-googlecloud-plain colored"></i>
<i class="devicon-googlecloud-plain-wordmark"></i>
<i class="devicon-googlecloud-plain-wordmark colored"></i>
<i class="devicon-googlecloud-plain" style="font-size: xx-small;"></i>
<i class="devicon-googlecloud-plain" style="font-size: x-small;"></i>
<i class="devicon-googlecloud-plain" style="font-size: small;"></i>
<i class="devicon-googlecloud-plain" style="font-size: medium;"></i>
<i class="devicon-googlecloud-plain" style="font-size: large; color: red;"></i>
<i class="devicon-googlecloud-plain" style="font-size: x-large; color: #ffff00;"></i>
<i class="devicon-googlecloud-plain" style="font-size: xx-large; color: rgb(0, 255, 0);"></i>
<!-- devicon svg images -->
<h3>2. Devicon SVG Images</h3>
<img height="20px" width="20px" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg" />
<img height="20px" width="20px" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original-wordmark.svg" />
<img height="20px" width="20px" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-plain.svg" />
<img height="20px" width="20px" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-plain-wordmark.svg" />
<img height="20px" width="20px" src="devicon/icons/googlecloud/googlecloud-plain-wordmark.svg" />
<!-- devicon svg code -->
<h3>3. Devicon SVG Code</h3>
<svg viewBox="0 0 128 128" height="50" width="50">
<g fill="red">
<path d="M68.7 37.9h1.1l3.1-3.1.2-1.3c-2.4-2.2-5.7-3.5-9.3-3.5-6.4 0-11.9 4.4-13.5 10.3.3-.2 1.1-.1 1.1-.1l6.2-1s.3-.5.5-.5c2.8-3 7.4-3.3 10.6-.8z"></path>
<path d="M77.4 40.3c-.8-2.6-2.2-5-4.3-6.8l-4.4 4.4c1.9 1.5 2.9 3.7 2.9 6.1v.8c2.1 0 3.9 1.7 3.9 3.9 0 2.1-1.7 3.8-3.9 3.8h-7.8l-.8.8V58l.8.8h7.8c5.6 0 10.1-4.5 10.1-10.1 0-3.4-1.7-6.5-4.4-8.3z"></path>
<path d="M56.1 58.7h7.8v-6.2h-7.8c-.6 0-1.1-.1-1.6-.3l-1.1.3-3.1 3.1-.3 1c1.7 1.4 3.9 2.1 6.1 2.1z"></path>
<path d="M56.1 38.5C50.5 38.5 46 43 46 48.6c0 3.2 1.5 6.2 4 8.1l4.5-4.5c-1.4-.7-2.3-2-2.3-3.6 0-2.1 1.7-3.9 3.9-3.9 1.5.1 2.9 1 3.5 2.3l4.5-4.5c-1.8-2.4-4.8-4-8-4zM15.9 78.3c-2.1 0-3.9-.8-5.5-2.3s-2.3-3.2-2.3-5.4.8-3.9 2.3-5.4 3.4-2.3 5.5-2.3c1.9.1 3.8.8 5.2 2.2l-1.5 1.5c-1-1-2.3-1.5-3.8-1.5s-2.8.5-3.9 1.6c-1 1-1.6 2.5-1.5 3.9 0 1.5.5 2.9 1.6 3.9 1 1.2 2.4 1.7 3.8 1.7 1.6 0 2.8-.5 3.9-1.5.6-.6 1-1.5 1.1-2.6h-4.9V70h7c.1.4.1.8.1 1.3 0 2.1-.6 3.7-1.8 4.9-1.4 1.4-3.1 2.2-5.3 2.2zm16.4-1.4c-1 .9-2.1 1.4-3.5 1.4s-2.6-.5-3.5-1.4-1.4-2.1-1.4-3.5.5-2.6 1.4-3.5 2.1-1.4 3.5-1.4 2.6.5 3.5 1.4 1.4 2.1 1.4 3.5-.5 2.6-1.4 3.5zm-5.5-1.4c.5.6 1.2.9 1.9.9.8 0 1.4-.3 2-.9s.8-1.3.8-2.1c0-.9-.3-1.6-.8-2.2s-1.2-.8-2-.8c-.7 0-1.5.3-2 .8-.5.6-.8 1.3-.8 2.2 0 .9.3 1.6.8 2.1zm16.3 1.4c-1 .9-2.1 1.4-3.5 1.4s-2.6-.5-3.5-1.4-1.4-2.1-1.4-3.5.5-2.6 1.4-3.5 2.1-1.4 3.5-1.4 2.6.5 3.5 1.4 1.4 2.1 1.4 3.5-.5 2.6-1.4 3.5zm-5.5-1.4c.5.6 1.2.9 1.9.9.8 0 1.4-.3 2-.9s.8-1.3.8-2.1c0-.9-.3-1.6-.8-2.2s-1.2-.8-2-.8c-.7 0-1.5.3-2 .8-.5.6-.8 1.3-.8 2.2 0 .9.3 1.6.8 2.1zm12.6 7.2c-1.1 0-2-.3-2.8-.9s-1.3-1.3-1.6-2l1.9-.8c.2.5.5.9.9 1.2s.9.5 1.6.5c.8 0 1.5-.3 1.9-.7s.7-1.2.7-2.2v-.7h-.1c-.6.7-1.5 1.1-2.6 1.1-1.3 0-2.4-.5-3.3-1.4-1-.8-1.5-2.1-1.4-3.4-.1-1.3.4-2.6 1.4-3.5.9-1 2-1.4 3.3-1.4.6 0 1.1.1 1.5.3s.8.5 1.1.8h.1v-.8h2.1v8.9c0 1.7-.4 3-1.3 3.9-.9.8-2 1.3-3.4 1.3zm.1-6.4c.7.1 1.4-.2 1.8-.8.5-.6.8-1.3.8-2.1 0-.9-.3-1.6-.8-2.2-.4-.5-1.1-.8-1.8-.8-.8 0-1.4.3-1.9.9s-.8 1.3-.8 2.2c0 .8.3 1.6.8 2.1s1.2.9 1.9.9zm8.2-12.9v14.5h-2.2V63.4zm5.9 14.8c-1.4 0-2.6-.5-3.5-1.4s-1.4-2.1-1.4-3.5.5-2.6 1.4-3.6c.8-.8 2-1.3 3.3-1.3.6 0 1.2.1 1.7.3.4.3.8.5 1.2.9.3.3.6.6.8 1 .2.3.4.6.5 1l.2.6-6.6 2.7c.5 1 1.3 1.5 2.4 1.5 1 0 1.8-.5 2.4-1.4l1.7 1.1c-.4.6-.9 1.1-1.6 1.5s-1.5.7-2.5.7zm-2.7-5.1l4.4-1.8c-.1-.3-.4-.6-.7-.8-.4-.1-.8-.2-1.2-.2-.6 0-1.2.3-1.8.8s-.8 1.2-.8 2.1zM80 78.2c-2 0-3.6-.7-5-2s-2-3-2-5 .7-3.7 2-5 3-2 5-2 3.7.7 4.9 2.2l-1.2 1.2c-.9-1.1-2.2-1.7-3.7-1.7s-2.7.5-3.7 1.5-1.5 2.3-1.5 3.9.5 2.9 1.5 3.9 2.2 1.5 3.7 1.5c1.6 0 3-.6 4.1-1.9l1.2 1.2c-.6.7-1.4 1.3-2.3 1.7-1 .4-2 .6-3 .6zm8.6-.3h-1.7V64.6h1.7zm2.8-8.1c.9-.9 2-1.4 3.4-1.4s2.5.5 3.4 1.4 1.3 2.1 1.3 3.5-.4 2.6-1.3 3.5-2 1.4-3.4 1.4-2.5-.5-3.4-1.4-1.3-2.1-1.3-3.5.4-2.6 1.3-3.5zm1.3 5.9c.6.6 1.3.9 2.1.9s1.5-.3 2.1-.9.9-1.4.9-2.4-.3-1.8-.9-2.4-1.3-.9-2.1-.9-1.5.3-2.1.9-.9 1.4-.9 2.4.3 1.8.9 2.4zm16.3 2.2h-1.6v-1.3h-.1c-.3.4-.7.8-1.2 1.1s-1.1.5-1.7.5c-1.1 0-2-.3-2.6-1s-.9-1.6-.9-2.8v-5.6h1.7v5.3c0 1.7.8 2.6 2.3 2.6.6 0 1.3-.3 1.7-.8.4-.6.6-1.3.6-2v-5h1.7v9.2zm5.8.3c-1.2 0-2.2-.5-3.1-1.4s-1.3-2.1-1.3-3.5.4-2.5 1.3-3.5 1.9-1.4 3.1-1.4c.7 0 1.3.2 1.9.4s1 .7 1.2 1.1h.1l-.1-1.3v-4.2h1.7v13.4H118v-1.3h-.1c-.3.4-.7.8-1.2 1.1-.6.3-1.2.4-1.9.4zm.3-1.6c.7.1 1.5-.2 2-.8.6-.6.8-1.4.8-2.4s-.3-1.8-.8-2.4c-.5-.5-1.3-.9-2-.9-.8 0-1.5.3-2.1.9s-.9 1.4-.9 2.4.3 1.8.9 2.4c.5.6 1.3 1 2.1 1z"></path>
</g>
</svg>
<svg viewBox="0 0 128 128" height="50" width="50">
<g>
<path fill="red" d="M68.7 37.9h1.1l3.1-3.1.2-1.3c-2.4-2.2-5.7-3.5-9.3-3.5-6.4 0-11.9 4.4-13.5 10.3.3-.2 1.1-.1 1.1-.1l6.2-1s.3-.5.5-.5c2.8-3 7.4-3.3 10.6-.8z"></path>
<path fill="yellow" d="M77.4 40.3c-.8-2.6-2.2-5-4.3-6.8l-4.4 4.4c1.9 1.5 2.9 3.7 2.9 6.1v.8c2.1 0 3.9 1.7 3.9 3.9 0 2.1-1.7 3.8-3.9 3.8h-7.8l-.8.8V58l.8.8h7.8c5.6 0 10.1-4.5 10.1-10.1 0-3.4-1.7-6.5-4.4-8.3z"></path>
<path fill="blue" d="M56.1 58.7h7.8v-6.2h-7.8c-.6 0-1.1-.1-1.6-.3l-1.1.3-3.1 3.1-.3 1c1.7 1.4 3.9 2.1 6.1 2.1z"></path>
<path fill="green" d="M56.1 38.5C50.5 38.5 46 43 46 48.6c0 3.2 1.5 6.2 4 8.1l4.5-4.5c-1.4-.7-2.3-2-2.3-3.6 0-2.1 1.7-3.9 3.9-3.9 1.5.1 2.9 1 3.5 2.3l4.5-4.5c-1.8-2.4-4.8-4-8-4zM15.9 78.3c-2.1 0-3.9-.8-5.5-2.3s-2.3-3.2-2.3-5.4.8-3.9 2.3-5.4 3.4-2.3 5.5-2.3c1.9.1 3.8.8 5.2 2.2l-1.5 1.5c-1-1-2.3-1.5-3.8-1.5s-2.8.5-3.9 1.6c-1 1-1.6 2.5-1.5 3.9 0 1.5.5 2.9 1.6 3.9 1 1.2 2.4 1.7 3.8 1.7 1.6 0 2.8-.5 3.9-1.5.6-.6 1-1.5 1.1-2.6h-4.9V70h7c.1.4.1.8.1 1.3 0 2.1-.6 3.7-1.8 4.9-1.4 1.4-3.1 2.2-5.3 2.2zm16.4-1.4c-1 .9-2.1 1.4-3.5 1.4s-2.6-.5-3.5-1.4-1.4-2.1-1.4-3.5.5-2.6 1.4-3.5 2.1-1.4 3.5-1.4 2.6.5 3.5 1.4 1.4 2.1 1.4 3.5-.5 2.6-1.4 3.5zm-5.5-1.4c.5.6 1.2.9 1.9.9.8 0 1.4-.3 2-.9s.8-1.3.8-2.1c0-.9-.3-1.6-.8-2.2s-1.2-.8-2-.8c-.7 0-1.5.3-2 .8-.5.6-.8 1.3-.8 2.2 0 .9.3 1.6.8 2.1zm16.3 1.4c-1 .9-2.1 1.4-3.5 1.4s-2.6-.5-3.5-1.4-1.4-2.1-1.4-3.5.5-2.6 1.4-3.5 2.1-1.4 3.5-1.4 2.6.5 3.5 1.4 1.4 2.1 1.4 3.5-.5 2.6-1.4 3.5zm-5.5-1.4c.5.6 1.2.9 1.9.9.8 0 1.4-.3 2-.9s.8-1.3.8-2.1c0-.9-.3-1.6-.8-2.2s-1.2-.8-2-.8c-.7 0-1.5.3-2 .8-.5.6-.8 1.3-.8 2.2 0 .9.3 1.6.8 2.1zm12.6 7.2c-1.1 0-2-.3-2.8-.9s-1.3-1.3-1.6-2l1.9-.8c.2.5.5.9.9 1.2s.9.5 1.6.5c.8 0 1.5-.3 1.9-.7s.7-1.2.7-2.2v-.7h-.1c-.6.7-1.5 1.1-2.6 1.1-1.3 0-2.4-.5-3.3-1.4-1-.8-1.5-2.1-1.4-3.4-.1-1.3.4-2.6 1.4-3.5.9-1 2-1.4 3.3-1.4.6 0 1.1.1 1.5.3s.8.5 1.1.8h.1v-.8h2.1v8.9c0 1.7-.4 3-1.3 3.9-.9.8-2 1.3-3.4 1.3zm.1-6.4c.7.1 1.4-.2 1.8-.8.5-.6.8-1.3.8-2.1 0-.9-.3-1.6-.8-2.2-.4-.5-1.1-.8-1.8-.8-.8 0-1.4.3-1.9.9s-.8 1.3-.8 2.2c0 .8.3 1.6.8 2.1s1.2.9 1.9.9zm8.2-12.9v14.5h-2.2V63.4zm5.9 14.8c-1.4 0-2.6-.5-3.5-1.4s-1.4-2.1-1.4-3.5.5-2.6 1.4-3.6c.8-.8 2-1.3 3.3-1.3.6 0 1.2.1 1.7.3.4.3.8.5 1.2.9.3.3.6.6.8 1 .2.3.4.6.5 1l.2.6-6.6 2.7c.5 1 1.3 1.5 2.4 1.5 1 0 1.8-.5 2.4-1.4l1.7 1.1c-.4.6-.9 1.1-1.6 1.5s-1.5.7-2.5.7zm-2.7-5.1l4.4-1.8c-.1-.3-.4-.6-.7-.8-.4-.1-.8-.2-1.2-.2-.6 0-1.2.3-1.8.8s-.8 1.2-.8 2.1zM80 78.2c-2 0-3.6-.7-5-2s-2-3-2-5 .7-3.7 2-5 3-2 5-2 3.7.7 4.9 2.2l-1.2 1.2c-.9-1.1-2.2-1.7-3.7-1.7s-2.7.5-3.7 1.5-1.5 2.3-1.5 3.9.5 2.9 1.5 3.9 2.2 1.5 3.7 1.5c1.6 0 3-.6 4.1-1.9l1.2 1.2c-.6.7-1.4 1.3-2.3 1.7-1 .4-2 .6-3 .6zm8.6-.3h-1.7V64.6h1.7zm2.8-8.1c.9-.9 2-1.4 3.4-1.4s2.5.5 3.4 1.4 1.3 2.1 1.3 3.5-.4 2.6-1.3 3.5-2 1.4-3.4 1.4-2.5-.5-3.4-1.4-1.3-2.1-1.3-3.5.4-2.6 1.3-3.5zm1.3 5.9c.6.6 1.3.9 2.1.9s1.5-.3 2.1-.9.9-1.4.9-2.4-.3-1.8-.9-2.4-1.3-.9-2.1-.9-1.5.3-2.1.9-.9 1.4-.9 2.4.3 1.8.9 2.4zm16.3 2.2h-1.6v-1.3h-.1c-.3.4-.7.8-1.2 1.1s-1.1.5-1.7.5c-1.1 0-2-.3-2.6-1s-.9-1.6-.9-2.8v-5.6h1.7v5.3c0 1.7.8 2.6 2.3 2.6.6 0 1.3-.3 1.7-.8.4-.6.6-1.3.6-2v-5h1.7v9.2zm5.8.3c-1.2 0-2.2-.5-3.1-1.4s-1.3-2.1-1.3-3.5.4-2.5 1.3-3.5 1.9-1.4 3.1-1.4c.7 0 1.3.2 1.9.4s1 .7 1.2 1.1h.1l-.1-1.3v-4.2h1.7v13.4H118v-1.3h-.1c-.3.4-.7.8-1.2 1.1-.6.3-1.2.4-1.9.4zm.3-1.6c.7.1 1.5-.2 2-.8.6-.6.8-1.4.8-2.4s-.3-1.8-.8-2.4c-.5-.5-1.3-.9-2-.9-.8 0-1.5.3-2.1.9s-.9 1.4-.9 2.4.3 1.8.9 2.4c.5.6 1.3 1 2.1 1z"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><g fill="#557ebf"><path d="M80.6 40.3h.4l-.2-.2 14-14v-.3c-11.8-10.4-28.1-14-43.2-9.5C36.5 20.8 24.9 32.8 20.7 48c.2-.1.5-.2.8-.2 5.2-3.4 11.4-5.4 17.9-5.4 2.2 0 4.3.2 6.4.6.1-.1.2-.1.3-.1 9-9.9 24.2-11.1 34.6-2.6h-.1z"/><path d="M108.1 47.8c-2.3-8.5-7.1-16.2-13.8-22.1L80 39.9c6 4.9 9.5 12.3 9.3 20v2.5c16.9 0 16.9 25.2 0 25.2H63.9v20h-.1l.1.2h25.4c14.6.1 27.5-9.3 31.8-23.1 4.3-13.8-1-28.8-13-36.9z"/><path d="M39 107.9h26.3V87.7H39c-1.9 0-3.7-.4-5.4-1.1l-15.2 14.6v.2c6 4.3 13.2 6.6 20.7 6.6z"/><path d="M40.2 41.9c-14.9.1-28.1 9.3-32.9 22.8-4.8 13.6 0 28.5 11.8 37.3l15.6-14.9c-8.6-3.7-10.6-14.5-4-20.8 6.6-6.4 17.8-4.4 21.7 3.8L68 55.2C61.4 46.9 51.1 42 40.2 42.1z"/></g></svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment