Monotone
The Monotone icon represents a color scheme used in design and user interface (UI) development.
Exports at 19 × 24 px
Code
Monotone in your framework
In any framework. Customize it above, and the code follows.
export const MonotoneIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="24" viewBox="0 0 415 512" {...props}>
<path fill="currentColor" fillRule="evenodd" d="M231.378 267.574c-3.37 1.86-9.348 16.235-8.517 22.296c.83 6.061 6.232 10.607 13.295 10.39c10.623-1.113 14.857-14.927 14.125-21.43c-1.544-9.993-10.91-15.536-18.903-11.256m-117.035-4.15c2.854.625 11.243 5.597 11.717 16.705c.486 11.414 6.84 8.755.73 13.39c-10.152 6.29-24.775 2.78-29.418-7.434c-1.815-4.189-.293-14.311 2.443-17.212c2.878-3.052 11.393-6.135 14.528-5.448M47.805 397.209c-8.415 1.04-37.35 10.793-43.996 19.451c-6.648 8.659-4.743 16.705 6.89 14.108c5.817-1.3-1.727-8.485 5.462-8.436c1.522 0-.342 6.64 3.425 8.268c3.26 1.41 14.502 2.18 14.523-1.615c.02-4.406 7.597-8.066 11.489-6.307c4.391 1.984.943 9.168 5.934 8.658c5.573-.569 4.464-11.187 9.164-11.379c4.76-.194-4.427-23.793-12.89-22.748m266.456-3.274c-2.493 3.031 9.375 32.115.83 38.53c-8.073 6.064-20.233 18.414-16.202 21.215c3.739 2.597 11.057 4.285 17.29-1.776c6.442-6.266 9.383-7.724 12.706-4.26c3.324 3.463.248 14.745 10.517 13.846c9.686-.848 6.6-11.085 10.155-13.024c3.086-1.682 10.705 18.825 19.028 18.56c3.867-.123 8.962-9.958 6.147-13.528c-4.464-5.66-3.972-8.136-1.363-7.778c2.03.28 12.883 20.231 17.466 21.193c4.017.844 7.318-13.4 3.247-16.505c-2.184-1.665-16.395-13.262-11.77-11.936c3.407.978 18.832 16.03 23.782 16.722c4.372.611 5.041-1.52.004-8.46c-4.72-6.502-42.41-27.138-52.654-32.259c-9.907-4.953-2.207-28.332-2.207-28.332c-11.768 1.333-28.337-1.859-36.976 7.792m-164.311 2.203c-2.106 8.614 5.849 27.472 7.846 29.309c1.693 1.556 25.196 1.398 26.91-.297c1.997-1.977 10.852-23.143 8.552-29.965c-7.058-9.057-41.023-7.081-43.308.953m-95.918-182.6c-13.221-2.128-21.607-16.08-26.558-26.68c-4.976 25.434-5.805 51.839-5.278 65.564c.83 21.647 1.625 55.463 7.479 75.33c5.62 19.075 42.993 93.121 49.854 105.633c5.972 10.89 16.053 29.172 22.774 34.897c1.673 3.108 1.645 4.992-.769 8.504c-2.937 3.98-7.049 7.04-4.992 16.223c2.056 9.184 3.818 10.717 7.637 9.799c3.82-.919 5.58-3.367 5.286-8.265s-.293-13.472 1.176-11.023c1.469 2.45 5.581 6.43 6.169 14.083s4.701 14.694 11.458 14.388s4.699-5.512 3.524-9.798s-5.289-13.163-4.114-14.693c1.175-1.531 6.757 7.345 10.283 12.244c3.525 4.898 7.05 10.409 13.513 10.103c6.004-.284 8.889-2.211 5.981-8.366c3.432-.274 6.176-2.483 8.399-4.065c7.613 2.123 14.184-2.873 10.514-7.841c4.87-2.734 6.904-8.313 10.376-12.154c.757 5.22-1.759 12.691-4.182 19.173c-.93 2.443-5.583 10.24 3.1 10.441c8.977.202 10.756-15.264 11.857-17.75c.936-2.112 3.74-6.977 3.74-6.977s4.567-.001 7.06 3.462s-.157 11.103.415 12.989c.486 1.605 5.525 8.714 8.309 6.494c6.164-4.3 5.342-14.864 2.91-20.35c-1.665-3.595-11.168-11.379-10.58-11.99c8.674 5.608 14.055 13.405 14.782 19.734c1.247 3.896 6.606 4.073 9.506 3.08c2.998-1.026-1.392-14.534-2.906-19.047c-1.388-4.14-12.2-4.89-14.542-5.196c-1.516-1.417-.72-3.595 4.118-6.694c23.14-12.786 45.053-33.76 61.255-52.14c9.816-13.21 17.95-28.701 24.378-41.77c20.026-34.467 27.212-76.931 33.012-109.087l10.254 1.84c-3.742 43.809-20.241 88.431-38.481 120.936c6.62-4.821 13.202-8.204 18.884-8.33c19.111-.432 29.914 3.9 36.561-5.192c24.871-26.09 44.363-52.853 45.7-85.722c2.492-20.781 4.984-51.52.83-66.672c-4.045-14.753-21.601-51.085-35.727-73.597c-14.38-22.917-53.179-78.79-77.275-101.303c-23.64-22.085-55.038-43.94-87.718-43.75c-32.68.188-60.935 10.8-77.518 23.77c-9.69 7.579-37.027 40.71-60.511 72.65c11.173 15.422 18.575 31.864 30.892 47.241c17.049-17.07 44.988-33.422 65.986-34.119c39.37-.773 62.891 24.254 77.489 50.03c4.18 7.381 17.654-8.346 21.428-16.183c9.334-21.009 28.996-33.268 48.47-23.768c8.836 4.032 17.77 14.582 19.625 29.566c.209 28.684-7.504 60.91-33.594 76.405c-5.297 2.864-9.935 5.104-15.125 6.775c4.982 31.5.663 67.021-4.467 94.617c-1.62 14.911-11.94 24.861-20.138 34.754c-15.565 15.96-23.604 38.458-34.782 55.486c-13.544 16.729-20.168 31.855-37.444 40.161c-8.077 4.166-19.448 16.135-28.296 22.336c-4.623-7.271-17.648-9.236-23.833-21.229c-.463-3.333-24.43-40.355-35.783-58.7c-14.382-19.428-30.245-44.125-40.304-63.59c-12.577-35.672-5.638-76.227 1.929-111.456c-2.5-4.143-6.635-9.372-11.996-11.21m-14.221-94.194c-7.184 17.119-9.577 36.467-5.538 54.301c3.153 10.803 9.016 25.166 19.76 29.476c6.764 0 11.206 4.514 14.473 8.24c6.443-20.949 16.352-43.74 29.406-59.989c-9.895-13.303-22.197-26.874-27.258-42.681c-1.472-3.787-3.547-4.675-6.811-5.03c-11.046.146-20.346 6.786-24.032 15.683m131.19.614c-27.79 3.654-46.887 17.711-64.742 38.135c-14.972 22.542-25.9 49.944-30.783 72.06c-4.446 29.95-15.47 73.944-2.124 101.27c11.394 22.049 31.303 52.316 46.819 71.888c11.338 13.614 18.74 36.914 34.676 41.5c13.314 4.481 27.119 7.438 37.269.708c12.857-8.67 21.638-23.066 28.975-34.07c10.938-20.247 20.026-38.434 35.426-56.348c4.714-7.134 13.745-13.8 16.003-21.595c4.167-24.246 9.291-51.803 8.704-73.011c-.713-13.188.034-21.784-5.526-37.509c-14.076-24.891-26.845-46.724-43.169-66.85c-12.975-15.948-27.895-36.654-61.528-36.178m108.294 27.653c-5.505 10.517-13.678 16.394-24.752 20.447c10.22 19.145 28.38 33.338 33.793 53.59c.145-.05.13-.023.277-.078c26.755-12.178 41.83-43.054 38.917-71.098c-2.37-12.577-11.024-22.96-23.109-24.11c-10.92.446-21.344 13.279-25.126 21.25M142.644 483.592c3.86 2.653 7.567 6.087 11.308 8.517l-.48 3.08c-4.016-4.762-7.981-7.252-10.828-11.597"/>
</svg>
);File Icons
More like it
Icons that share its tags, in the same style.
Skip the copy and paste. With Pro, your AI agent finds and installs any File Icons icon from a prompt.
Get ProTags
Browse by tag
Monotone is tagged UI, design, UX and 3 more. Related tags follow; each opens its icons from every library.
Pricing
File Icons MCP, with Pro
Ask for Monotone or any of 930 File Icons icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Monotone icon means and where it's used, then how to install, style, label and license it.
The Monotone icon represents a color scheme used in design and user interface (UI) development. Monotone color schemes feature a single color used in different shades and tones to create visual interest and hierarchy.
The Monotone icon appears in various design and development tools and platforms, such as design systems, UI kits, and graphic design software. For example, it may be used in design systems like Monotone or other color scheme-related tools.
From a UX perspective, the Monotone icon communicates the use of a simple and consistent color scheme. It helps users understand that the design features a single color used in different shades and tones to create visual interest and hierarchy.
Monotone is one of 930 icons in File Icons, made by John Gardner and released under ISC. It is drawn on a 415 × 512 grid.
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds MonotoneIcon to components/icons/file-icons-monotone.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
Copy it as React (from Get icon, or the Code section): a typed MonotoneIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the Monotone icon, or any of 930 File Icons icons, and install it from a prompt.
It's drawn in currentColor, so it takes the text color wherever you use it: a class like text-primary recolors it. To bake a color in, set one in Customize before you copy.
Set width and height on the component, or a class like size-6. It's drawn on a 415 × 512 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Yes. It follows the text color, so with text-foreground (or any theme token) it changes with your light and dark themes. The icon is a vector, so it needs no separate dark asset.
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="Monotone", so screen readers say what it does.
Yes. MonotoneIcon passes every SVG prop to the svg element, so <MonotoneIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
Yes. ISC allows commercial use; keep the license notice when you ship the icons' source files. The full terms are in the license, linked on this page.
No visible credit is required: ISC only asks that you keep the license notice if you ship the icons' source files. Icons installed with the shadcn CLI already start with a comment naming File Icons, John Gardner and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
Its tags are UI, design, UX, color, frontend and scheme. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Monotone in another set.
4.9 out of 5 from 150+ developers
Install Monotone from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro