baseball cap icon

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

Name: baseball-cap-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

baseball-cap baseball-cap-bold baseball-cap-duotone baseball-cap-fill baseball-cap-light

Related icons in Phosphor

Use the baseball cap icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 28A100.12 100.12 0 0 0 28 128v56a20 20 0 0 0 31.84 16.12C72.46 191 94.53 180 128 180s55.54 10.94 68.16 20.12a20 20 0 0 0 21 1.67A19.87 19.87 0 0 0 228 184v-56A100.12 100.12 0 0 0 128 28m92 100v16.23a162.3 162.3 0 0 0-48.67-22.47a162.56 162.56 0 0 0-34.15-85.31A92.12 92.12 0 0 1 220 128m-56.9-8.26a166.6 166.6 0 0 0-70.2 0C97.64 76.93 120 47.31 128 38c8 9.32 30.36 38.93 35.1 81.75Zm-44.28-83.28a162.56 162.56 0 0 0-34.15 85.31A162.3 162.3 0 0 0 36 144.24V128a92.12 92.12 0 0 1 82.82-91.54m94.66 158.21a11.88 11.88 0 0 1-12.61-1C187.29 183.78 163.62 172 128 172s-59.29 11.77-72.87 21.65a11.88 11.88 0 0 1-12.61 1A11.75 11.75 0 0 1 36 184v-30a156 156 0 0 1 184 0v30a11.75 11.75 0 0 1-6.52 10.67"/></svg>

React

import type { SVGProps } from "react";

export function PhBaseballCapThin(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="M128 28A100.12 100.12 0 0 0 28 128v56a20 20 0 0 0 31.84 16.12C72.46 191 94.53 180 128 180s55.54 10.94 68.16 20.12a20 20 0 0 0 21 1.67A19.87 19.87 0 0 0 228 184v-56A100.12 100.12 0 0 0 128 28m92 100v16.23a162.3 162.3 0 0 0-48.67-22.47a162.56 162.56 0 0 0-34.15-85.31A92.12 92.12 0 0 1 220 128m-56.9-8.26a166.6 166.6 0 0 0-70.2 0C97.64 76.93 120 47.31 128 38c8 9.32 30.36 38.93 35.1 81.75Zm-44.28-83.28a162.56 162.56 0 0 0-34.15 85.31A162.3 162.3 0 0 0 36 144.24V128a92.12 92.12 0 0 1 82.82-91.54m94.66 158.21a11.88 11.88 0 0 1-12.61-1C187.29 183.78 163.62 172 128 172s-59.29 11.77-72.87 21.65a11.88 11.88 0 0 1-12.61 1A11.75 11.75 0 0 1 36 184v-30a156 156 0 0 1 184 0v30a11.75 11.75 0 0 1-6.52 10.67"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 28A100.12 100.12 0 0 0 28 128v56a20 20 0 0 0 31.84 16.12C72.46 191 94.53 180 128 180s55.54 10.94 68.16 20.12a20 20 0 0 0 21 1.67A19.87 19.87 0 0 0 228 184v-56A100.12 100.12 0 0 0 128 28m92 100v16.23a162.3 162.3 0 0 0-48.67-22.47a162.56 162.56 0 0 0-34.15-85.31A92.12 92.12 0 0 1 220 128m-56.9-8.26a166.6 166.6 0 0 0-70.2 0C97.64 76.93 120 47.31 128 38c8 9.32 30.36 38.93 35.1 81.75Zm-44.28-83.28a162.56 162.56 0 0 0-34.15 85.31A162.3 162.3 0 0 0 36 144.24V128a92.12 92.12 0 0 1 82.82-91.54m94.66 158.21a11.88 11.88 0 0 1-12.61-1C187.29 183.78 163.62 172 128 172s-59.29 11.77-72.87 21.65a11.88 11.88 0 0 1-12.61 1A11.75 11.75 0 0 1 36 184v-30a156 156 0 0 1 184 0v30a11.75 11.75 0 0 1-6.52 10.67"/></svg>
</template>

CSS

.icon-baseball-cap-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%22M128%2028A100.12%20100.12%200%200%200%2028%20128v56a20%2020%200%200%200%2031.84%2016.12C72.46%20191%2094.53%20180%20128%20180s55.54%2010.94%2068.16%2020.12a20%2020%200%200%200%2021%201.67A19.87%2019.87%200%200%200%20228%20184v-56A100.12%20100.12%200%200%200%20128%2028m92%20100v16.23a162.3%20162.3%200%200%200-48.67-22.47a162.56%20162.56%200%200%200-34.15-85.31A92.12%2092.12%200%200%201%20220%20128m-56.9-8.26a166.6%20166.6%200%200%200-70.2%200C97.64%2076.93%20120%2047.31%20128%2038c8%209.32%2030.36%2038.93%2035.1%2081.75Zm-44.28-83.28a162.56%20162.56%200%200%200-34.15%2085.31A162.3%20162.3%200%200%200%2036%20144.24V128a92.12%2092.12%200%200%201%2082.82-91.54m94.66%20158.21a11.88%2011.88%200%200%201-12.61-1C187.29%20183.78%20163.62%20172%20128%20172s-59.29%2011.77-72.87%2021.65a11.88%2011.88%200%200%201-12.61%201A11.75%2011.75%200%200%201%2036%20184v-30a156%20156%200%200%201%20184%200v30a11.75%2011.75%200%200%201-6.52%2010.67%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%22M128%2028A100.12%20100.12%200%200%200%2028%20128v56a20%2020%200%200%200%2031.84%2016.12C72.46%20191%2094.53%20180%20128%20180s55.54%2010.94%2068.16%2020.12a20%2020%200%200%200%2021%201.67A19.87%2019.87%200%200%200%20228%20184v-56A100.12%20100.12%200%200%200%20128%2028m92%20100v16.23a162.3%20162.3%200%200%200-48.67-22.47a162.56%20162.56%200%200%200-34.15-85.31A92.12%2092.12%200%200%201%20220%20128m-56.9-8.26a166.6%20166.6%200%200%200-70.2%200C97.64%2076.93%20120%2047.31%20128%2038c8%209.32%2030.36%2038.93%2035.1%2081.75Zm-44.28-83.28a162.56%20162.56%200%200%200-34.15%2085.31A162.3%20162.3%200%200%200%2036%20144.24V128a92.12%2092.12%200%200%201%2082.82-91.54m94.66%20158.21a11.88%2011.88%200%200%201-12.61-1C187.29%20183.78%20163.62%20172%20128%20172s-59.29%2011.77-72.87%2021.65a11.88%2011.88%200%200%201-12.61%201A11.75%2011.75%200%200%201%2036%20184v-30a156%20156%200%200%201%20184%200v30a11.75%2011.75%200%200%201-6.52%2010.67%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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