Materializecss icon
devicon:materializecss
The Materializecss icon (devicon:materializecss) 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"><path fill="#f6a2ad" d="M52.106 31.332c-10.69 2.814-16.377 19.274-8.423 27.718l.107.7c.243 1.965.703 3.893 1.053 5.857c.77 3.861 1.507 7.723 2.316 11.583c1.087 4.946 2.138 9.893 3.892 14.669c.494 1.332 1.056 2.665 1.933 3.785c.488.562 1.087 1.194 1.929 1.017c13.134-9.982 9.07-17.77 8.718-26.854l.906.237l-1.168-5.589a531 531 0 0 0-2.424-12.457c-1.05-4.915-2.104-9.825-3.646-14.6c-.455-1.264-.948-2.521-1.578-3.684c-.455-1.017-1.303-1.857-2.281-2.382Zm40.177 0c-11.202 3.79-17.397 14.315-8.42 27.902l.11.581a.3.3 0 0 1 .028.114l.133.72c1.667 8.984 3.23 17.97 5.623 26.789c.77 2.457 1.433 4.947 2.735 7.19c.632.916 1.371 2.14 2.666 2.002c12.193.031 12.751-14.337 9.439-26.195l-.358-2.615a90 90 0 0 0-.343-1.896c-.985-5.47-2.034-10.98-3.192-16.422c-.877-4.03-1.825-8.104-3.126-12.034c-.525-1.435-1.05-2.946-1.895-4.28c-.525-.739-1.087-1.438-1.896-1.856h-1.502ZM1.226 66.384c-.423 0-.84.07-1.226.102c1.087.246 2.104.846 3.014 1.51c1.196 1.055 2.111 2.387 2.845 3.79c1.23 2.313 2.033 4.809 2.703 7.336c1.295 5.048 1.541 10.38 3.646 15.19c.422.737.846 1.546 1.579 2c.214.14.422.319.669.28c25.666-.743 16.07-18.685 8.484-27.695l-.206-.232c-.663-.846-1.543-1.548-2.523-1.933c-.706-.315-1.438-.247-2.14-.348z"/><path fill="#eb7077" d="M34.07 31.285c-.176 0-.352.009-.526.047c-.877.385-1.472 1.156-1.933 1.927c-.803 1.403-1.365 2.95-1.858 4.454c-1.017 3.159-1.787 6.425-2.559 9.653c-.947 4.14-1.792 8.347-2.596 12.523c-.492 2.843-1.127 5.687-1.549 8.531c-.35 2.56-.948 5.084-1.473 7.643c-.84 3.86-1.68 7.758-2.772 11.582c-.701 2.388-1.435 4.771-2.597 6.984a6.1 6.1 0 0 1-1.718 1.964c1.054.106 2.07-.002 3.126.037h15.436c.385.031.669-.247.915-.493c1.119-1.017 1.68-2.49 2.281-3.86c1.259-3.329 2.106-6.775 2.909-10.21c1.723-7.476 3.089-14.982 4.42-22.526c.424-2.28.879-4.597 1.372-6.91c1.087-5.093 2.174-10.178 3.754-15.126c.562-1.612 1.156-3.262 2.072-4.74c.316-.594.801-1.048 1.332-1.47H34.598c-.177 0-.352-.01-.528-.01m49.035.033c-3.07-.005-6.14-.005-9.208.014c-1.23.418-1.895 1.61-2.457 2.666c-1.439 2.983-2.248 6.242-2.981 9.47c-1.789 7.404-3.197 14.88-4.53 22.386c-1.119 5.825-2.211 11.65-3.613 17.407c-.772 3.09-1.545 6.21-2.702 9.192c-.632 1.51-1.262 3.158-2.564 4.208c.316.037.67.037.986.037c5.858 0 11.72.039 17.577 0c.878-.422 1.441-1.332 1.933-2.173c.98-1.863 1.612-3.86 2.207-5.826c.948-3.196 1.686-6.455 2.388-9.684a525 525 0 0 0 3.72-19.403c1.194-6.597 2.49-13.16 4.316-19.58c.702-2.35 1.402-4.702 2.596-6.844c.385-.7.981-1.3 1.543-1.856c-3.07 0-6.141-.01-9.211-.014m42.248 35.056c-.886.009-1.773.026-2.648.01h-12.666c-1.472-.07-2.913.632-3.899 1.72c-.595.561-.91 1.366-1.365 1.997c-.564.777-.773 1.719-1.088 2.597c-.985 3.127-1.617 6.387-2.142 9.615a55 55 0 0 1-1.788 7.507c-.563 1.826-1.301 3.614-2.457 5.124c-.563.738-1.301 1.262-2.142 1.649c.354.068.741.068 1.125.068c5.788-.033 11.575.039 17.4-.031c1.863-1.472 2.95-3.683 3.652-5.894c1.054-3.16 1.054-6.528 1.542-9.755c.492-3.298 1.087-6.667 2.773-9.617a10.3 10.3 0 0 1 4.63-4.176c.563-.278 1.195-.419 1.72-.77a39 39 0 0 0-2.647-.044"/></svg>How to use the Materializecss icon
React
import { Icon } from "@iconify/react";
<Icon icon="devicon:materializecss" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="devicon:materializecss" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="devicon:materializecss" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[devicon--materializecss]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/devicon -->
<div class="i-devicon:materializecss"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="devicon:materializecss"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/devicon/materializecss.svg" alt="Materializecss icon" width="24" height="24">Materializecss icon in other icon sets
Materializecss icon FAQ
Is the Materializecss 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 Materializecss icon in React?
Install @iconify/react and render <Icon icon="devicon:materializecss" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Materializecss icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/devicon/materializecss.svg" alt="Materializecss icon">, or paste the SVG code inline to style it with CSS.