ICONYZ
English
Padding icon from Fluent UI MDL2

Padding icon

fluent-mdl2:padding

The Padding icon (fluent-mdl2:padding) is a free SVG icon from the Fluent UI MDL2 set by Microsoft Corporation. It is drawn on a 2048 × 2048 grid. Fluent UI MDL2 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.

Icon set
Fluent UI MDL2
Author
Microsoft Corporation
License
MIT
Size
2048 × 2048
Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="2048" viewBox="0 0 2048 2048"><path fill="currentColor" d="M0 0h128v128H0zm1920 0v128h-128V0zM256 0h256v128H256zm640 128H640V0h256zm384 0h-256V0h256zM1408 0h256v128h-256zM0 1920h128v128H0zm1792 0h128v128h-128zm-1536 0h256v128H256zm384 0h256v128H640zm384 0h256v128h-256zm384 0h256v128h-256zM1024 603v842l211-210l90 90l-365 365l-365-365l90-90l211 210V603L685 813l-90-90l365-365l365 365l-90 90z"/></svg>

How to use the Padding icon

React

import { Icon } from "@iconify/react";

<Icon icon="fluent-mdl2:padding" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fluent-mdl2:padding" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fluent-mdl2:padding" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-mdl2--padding]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-mdl2 -->
<div class="i-fluent-mdl2:padding"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fluent-mdl2:padding"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/fluent-mdl2/padding.svg" alt="Padding icon" width="24" height="24">

Related icons in Fluent UI MDL2

Padding icon in other icon sets

Padding icon FAQ

Is the Padding icon free for commercial use?

Yes. Fluent UI MDL2 icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Padding icon in React?

Install @iconify/react and render <Icon icon="fluent-mdl2:padding" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Padding icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fluent-mdl2/padding.svg" alt="Padding icon">, or paste the SVG code inline to style it with CSS.

Browse all Fluent UI MDL2 icons →