crown cross icon

crown-cross-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name
crown-cross-thin
Set
Phosphor
Style
Thin
Viewbox
256×256
License
MIT

5 other variants in Phosphor

crown-crosscrown-cross-boldcrown-cross-duotonecrown-cross-fillcrown-cross-light

Related icons in Phosphor

crown-simple

Use the crown cross icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M180 60c-15.15 0-29.15 5.06-39.43 14.25a49.3 49.3 0 0 0-8.57 10V36h20a4 4 0 0 0 0-8h-20V8a4 4 0 0 0-8 0v20h-20a4 4 0 0 0 0 8h20v48.26a49.3 49.3 0 0 0-8.57-10C105.15 65.06 91.15 60 76 60a56.06 56.06 0 0 0-56 56c0 28.36 13.79 46.38 25.37 56.51A85.6 85.6 0 0 0 68 186.74V208a12 12 0 0 0 12 12h96a12 12 0 0 0 12-12v-21.26a85.6 85.6 0 0 0 22.63-14.23C222.21 162.38 236 144.36 236 116a56.06 56.06 0 0 0-56-56m25.59 106.29a75.5 75.5 0 0 1-22.85 13.92A4 4 0 0 0 180 184v24a4 4 0 0 1-4 4H80a4 4 0 0 1-4-4v-24a4 4 0 0 0-2.73-3.79a75.4 75.4 0 0 1-22.86-13.92C35.54 153.17 28 136.25 28 116a48.05 48.05 0 0 1 48-48c27.81 0 48 18.5 48 44v64a4 4 0 0 0 8 0v-64c0-25.5 20.19-44 48-44a48.05 48.05 0 0 1 48 48c0 20.25-7.54 37.17-22.41 50.29"/></svg>

React

import type { SVGProps } from "react";

export function PhCrownCrossThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M180 60c-15.15 0-29.15 5.06-39.43 14.25a49.3 49.3 0 0 0-8.57 10V36h20a4 4 0 0 0 0-8h-20V8a4 4 0 0 0-8 0v20h-20a4 4 0 0 0 0 8h20v48.26a49.3 49.3 0 0 0-8.57-10C105.15 65.06 91.15 60 76 60a56.06 56.06 0 0 0-56 56c0 28.36 13.79 46.38 25.37 56.51A85.6 85.6 0 0 0 68 186.74V208a12 12 0 0 0 12 12h96a12 12 0 0 0 12-12v-21.26a85.6 85.6 0 0 0 22.63-14.23C222.21 162.38 236 144.36 236 116a56.06 56.06 0 0 0-56-56m25.59 106.29a75.5 75.5 0 0 1-22.85 13.92A4 4 0 0 0 180 184v24a4 4 0 0 1-4 4H80a4 4 0 0 1-4-4v-24a4 4 0 0 0-2.73-3.79a75.4 75.4 0 0 1-22.86-13.92C35.54 153.17 28 136.25 28 116a48.05 48.05 0 0 1 48-48c27.81 0 48 18.5 48 44v64a4 4 0 0 0 8 0v-64c0-25.5 20.19-44 48-44a48.05 48.05 0 0 1 48 48c0 20.25-7.54 37.17-22.41 50.29"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M180 60c-15.15 0-29.15 5.06-39.43 14.25a49.3 49.3 0 0 0-8.57 10V36h20a4 4 0 0 0 0-8h-20V8a4 4 0 0 0-8 0v20h-20a4 4 0 0 0 0 8h20v48.26a49.3 49.3 0 0 0-8.57-10C105.15 65.06 91.15 60 76 60a56.06 56.06 0 0 0-56 56c0 28.36 13.79 46.38 25.37 56.51A85.6 85.6 0 0 0 68 186.74V208a12 12 0 0 0 12 12h96a12 12 0 0 0 12-12v-21.26a85.6 85.6 0 0 0 22.63-14.23C222.21 162.38 236 144.36 236 116a56.06 56.06 0 0 0-56-56m25.59 106.29a75.5 75.5 0 0 1-22.85 13.92A4 4 0 0 0 180 184v24a4 4 0 0 1-4 4H80a4 4 0 0 1-4-4v-24a4 4 0 0 0-2.73-3.79a75.4 75.4 0 0 1-22.86-13.92C35.54 153.17 28 136.25 28 116a48.05 48.05 0 0 1 48-48c27.81 0 48 18.5 48 44v64a4 4 0 0 0 8 0v-64c0-25.5 20.19-44 48-44a48.05 48.05 0 0 1 48 48c0 20.25-7.54 37.17-22.41 50.29"/></svg>
</template>

CSS

.icon-crown-cross-thin {
  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%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M180%2060c-15.15%200-29.15%205.06-39.43%2014.25a49.3%2049.3%200%200%200-8.57%2010V36h20a4%204%200%200%200%200-8h-20V8a4%204%200%200%200-8%200v20h-20a4%204%200%200%200%200%208h20v48.26a49.3%2049.3%200%200%200-8.57-10C105.15%2065.06%2091.15%2060%2076%2060a56.06%2056.06%200%200%200-56%2056c0%2028.36%2013.79%2046.38%2025.37%2056.51A85.6%2085.6%200%200%200%2068%20186.74V208a12%2012%200%200%200%2012%2012h96a12%2012%200%200%200%2012-12v-21.26a85.6%2085.6%200%200%200%2022.63-14.23C222.21%20162.38%20236%20144.36%20236%20116a56.06%2056.06%200%200%200-56-56m25.59%20106.29a75.5%2075.5%200%200%201-22.85%2013.92A4%204%200%200%200%20180%20184v24a4%204%200%200%201-4%204H80a4%204%200%200%201-4-4v-24a4%204%200%200%200-2.73-3.79a75.4%2075.4%200%200%201-22.86-13.92C35.54%20153.17%2028%20136.25%2028%20116a48.05%2048.05%200%200%201%2048-48c27.81%200%2048%2018.5%2048%2044v64a4%204%200%200%200%208%200v-64c0-25.5%2020.19-44%2048-44a48.05%2048.05%200%200%201%2048%2048c0%2020.25-7.54%2037.17-22.41%2050.29%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%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M180%2060c-15.15%200-29.15%205.06-39.43%2014.25a49.3%2049.3%200%200%200-8.57%2010V36h20a4%204%200%200%200%200-8h-20V8a4%204%200%200%200-8%200v20h-20a4%204%200%200%200%200%208h20v48.26a49.3%2049.3%200%200%200-8.57-10C105.15%2065.06%2091.15%2060%2076%2060a56.06%2056.06%200%200%200-56%2056c0%2028.36%2013.79%2046.38%2025.37%2056.51A85.6%2085.6%200%200%200%2068%20186.74V208a12%2012%200%200%200%2012%2012h96a12%2012%200%200%200%2012-12v-21.26a85.6%2085.6%200%200%200%2022.63-14.23C222.21%20162.38%20236%20144.36%20236%20116a56.06%2056.06%200%200%200-56-56m25.59%20106.29a75.5%2075.5%200%200%201-22.85%2013.92A4%204%200%200%200%20180%20184v24a4%204%200%200%201-4%204H80a4%204%200%200%201-4-4v-24a4%204%200%200%200-2.73-3.79a75.4%2075.4%200%200%201-22.86-13.92C35.54%20153.17%2028%20136.25%2028%20116a48.05%2048.05%200%200%201%2048-48c27.81%200%2048%2018.5%2048%2044v64a4%204%200%200%200%208%200v-64c0-25.5%2020.19-44%2048-44a48.05%2048.05%200%200%201%2048%2048c0%2020.25-7.54%2037.17-22.41%2050.29%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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