modx icon logo

modx-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
modx-icon
Set
SVG Logos
Style
Color
Viewbox
256×266
License
CC0

Use the modx icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 266"><path fill="#00b5de" d="M256.002 25.523H127.614l-17.788 27.843l92.81 57.233z"/><path fill="#00decc" d="M109.826 53.366L23.976 0v128.388l30.163 17.015l148.497-34.804z"/><path fill="#ff5529" d="m230.48 136.896l-27.844-17.016l-57.233 92.037l85.077 53.366z"/><path fill="#ff9640" d="m202.636 119.88l-149.27 35.578L0 238.987h128.388l17.015-27.07z"/></svg>

React

import type { SVGProps } from "react";

export function LogosModxIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 266"><path fill="#00b5de" d="M256.002 25.523H127.614l-17.788 27.843l92.81 57.233z"/><path fill="#00decc" d="M109.826 53.366L23.976 0v128.388l30.163 17.015l148.497-34.804z"/><path fill="#ff5529" d="m230.48 136.896l-27.844-17.016l-57.233 92.037l85.077 53.366z"/><path fill="#ff9640" d="m202.636 119.88l-149.27 35.578L0 238.987h128.388l17.015-27.07z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 266"><path fill="#00b5de" d="M256.002 25.523H127.614l-17.788 27.843l92.81 57.233z"/><path fill="#00decc" d="M109.826 53.366L23.976 0v128.388l30.163 17.015l148.497-34.804z"/><path fill="#ff5529" d="m230.48 136.896l-27.844-17.016l-57.233 92.037l85.077 53.366z"/><path fill="#ff9640" d="m202.636 119.88l-149.27 35.578L0 238.987h128.388l17.015-27.07z"/></svg>
</template>

CSS

.icon-modx-icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20266%22%3E%3Cpath%20fill%3D%22%2300b5de%22%20d%3D%22M256.002%2025.523H127.614l-17.788%2027.843l92.81%2057.233z%22%2F%3E%3Cpath%20fill%3D%22%2300decc%22%20d%3D%22M109.826%2053.366L23.976%200v128.388l30.163%2017.015l148.497-34.804z%22%2F%3E%3Cpath%20fill%3D%22%23ff5529%22%20d%3D%22m230.48%20136.896l-27.844-17.016l-57.233%2092.037l85.077%2053.366z%22%2F%3E%3Cpath%20fill%3D%22%23ff9640%22%20d%3D%22m202.636%20119.88l-149.27%2035.578L0%20238.987h128.388l17.015-27.07z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20266%22%3E%3Cpath%20fill%3D%22%2300b5de%22%20d%3D%22M256.002%2025.523H127.614l-17.788%2027.843l92.81%2057.233z%22%2F%3E%3Cpath%20fill%3D%22%2300decc%22%20d%3D%22M109.826%2053.366L23.976%200v128.388l30.163%2017.015l148.497-34.804z%22%2F%3E%3Cpath%20fill%3D%22%23ff5529%22%20d%3D%22m230.48%20136.896l-27.844-17.016l-57.233%2092.037l85.077%2053.366z%22%2F%3E%3Cpath%20fill%3D%22%23ff9640%22%20d%3D%22m202.636%20119.88l-149.27%2035.578L0%20238.987h128.388l17.015-27.07z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/modx-icon.svg?color=%231a73e8&size=48