Color

This icon uses multiple colors. Use the SVG Editor to customize it.

Open in SVG Editor

Carbon Icons

Theme Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Download SVG

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: theme

The Theme icon is available as a free SVG and is ready to drop into any web or app project.

img tag

<img src="https://proicons.com/icon/321095.svg" alt="Theme icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321095.svg" alt="Theme icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321095.svg"
  alt="Theme icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-theme {
  background-image: url('https://proicons.com/icon/321095.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>theme</title>
    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle" fill="#161616" x="56" y="38" width="208" height="26"></rect>
        <rect id="Rectangle-Copy" fill="#262626" opacity="0.956266131" x="56" y="64" width="208" height="26"></rect>
        <rect id="Rectangle-Copy-2" fill="#F4F4F4" x="56" y="90" width="208" height="26"></rect>
        <rect id="Rectangle-Copy-3" stroke="#E0E0E0" fill="#FFFFFF" x="56" y="116" width="208" height="26"></rect>
    </g>
</svg>

Theme in other icon packs

IconPark

Qlementine Icons

Copied!

Theme Icon

More from Carbon Icons

Theme in other icon packs