Moodle icon
devicon:moodle
The Moodle icon (devicon:moodle) is a free SVG icon from the Devicon set by konpa. It is drawn on a 128 × 128 grid. Devicon icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><radialGradient id="SVGbuAnqd5F" cx="532.855" cy="-537.557" r="209.76" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#faaf40"/><stop offset=".043" stop-color="#f9a538"/><stop offset=".112" stop-color="#f89d31"/><stop offset=".227" stop-color="#f89a2f"/><stop offset=".528" stop-color="#f7922d"/><stop offset="1" stop-color="#f37b28"/></radialGradient><path fill="url(#SVGbuAnqd5F)" d="M106.259 105.754V66.975c0-8.164-3.397-12.244-10.034-12.244c-6.629 0-10.034 4.08-10.034 12.244v38.779H66.294V66.975c0-8.164-3.228-12.244-9.862-12.244c-6.633 0-10.036 4.08-10.036 12.244v38.779H26.667V64.768c0-8.504 2.891-14.801 8.844-19.223c5.102-3.91 12.246-5.777 20.92-5.777c9.015 0 15.478 2.207 19.727 6.801c3.57-4.594 10.207-6.801 19.897-6.801c8.844 0 15.819 1.867 20.922 5.777c5.951 4.422 8.843 10.719 8.843 19.223v41.152h-19.563v-.166z"/><path fill="#58595b" d="m28.539 49.627l-2.041 10.207c18.708 6.291 36.395.166 45.751-16.158c-13.778-9.522-26.535.17-43.71 5.951"/><linearGradient id="SVGcNUTNdEn" x1="324.268" x2="368.932" y1="-509.952" y2="-509.952" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#929497"/><stop offset=".124" stop-color="#757578"/><stop offset=".279" stop-color="#575658"/><stop offset=".44" stop-color="#403e3f"/><stop offset=".609" stop-color="#302d2e"/><stop offset=".788" stop-color="#262223"/><stop offset="1" stop-color="#231f20"/></linearGradient><path fill="url(#SVGcNUTNdEn)" d="M28.539 47.08c-.681 3.91-1.192 7.65-1.872 11.563c17.857 6.125 35.375.85 44.73-15.137c-11.909-13.776-25.17-2.383-42.858 3.574"/><linearGradient id="SVGjd2FkdVL" x1="332.834" x2="351.377" y1="-495.051" y2="-521.534" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#231f20"/><stop offset="1" stop-color="#231f20" stop-opacity="0"/></linearGradient><path fill="url(#SVGjd2FkdVL)" d="M49.799 51.668c-8.164-1.701-17.009 2.555-23.131 6.975c-3.912-28.57 13.777-27.893 36.903-20.75c-1.529 6.975-4.083 16.33-8.502 21.941c-.169-3.744-1.869-6.293-5.27-8.166"/><linearGradient id="SVGeMS1Yb7O" x1="299.778" x2="381.412" y1="-495.802" y2="-495.802" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#929497"/><stop offset=".124" stop-color="#757578"/><stop offset=".279" stop-color="#575658"/><stop offset=".44" stop-color="#403e3f"/><stop offset=".609" stop-color="#302d2e"/><stop offset=".788" stop-color="#262223"/><stop offset="1" stop-color="#231f20"/></linearGradient><path fill="url(#SVGeMS1Yb7O)" d="M2.178 47.08c29.932-18.031 46.77-21.43 81.634-25c-40.478 31.969-41.499 25-81.634 25"/><path fill="none" stroke="#4a4a4c" stroke-width=".5" d="M83.812 22.246L51.667 45.545"/><path fill="#231f20" d="M45.545 34.66c.34 3.744-.511-3.572 0 0" opacity=".23"/><path fill="none" stroke="#a8abad" stroke-width=".5" d="m2.178 47.08l49.489-1.535"/><path fill="none" stroke="#f16922" stroke-width=".5" d="M42.484 35.002C33.98 37.383 6.09 43.506 5.747 47.08c-.849 6.631-.167 17.176-.167 17.176"/><path fill="#f16922" d="M8.131 89.596c-3.063-7.652-6.804-16.158-2.384-26.703C8.64 72.756 8.131 80.24 8.131 89.596"/><path fill="#6d6e70" d="M41.076 33.844c.708-.25 1.384-.17 1.509.184c.126.355-.344.846-1.052 1.096c-.709.256-1.384.172-1.51-.184c-.127-.352.344-.844 1.053-1.096"/></svg>How to use the Moodle icon
React
import { Icon } from "@iconify/react";
<Icon icon="devicon:moodle" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="devicon:moodle" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="devicon:moodle" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[devicon--moodle]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/devicon -->
<div class="i-devicon:moodle"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="devicon:moodle"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/devicon/moodle.svg" alt="Moodle icon" width="24" height="24">Related icons in Devicon
Moodle icon in other icon sets
Moodle icon FAQ
Is the Moodle icon free for commercial use?
Yes. Devicon icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Moodle icon in React?
Install @iconify/react and render <Icon icon="devicon:moodle" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Moodle icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/devicon/moodle.svg" alt="Moodle icon">, or paste the SVG code inline to style it with CSS.