colon icon

colon-outline from Health Icons by Resolve to Save Lives · Outline · Body · MIT Free for personal and commercial use.

Name: colon-outline
Set: Health Icons
Style: Outline
Category: Body
Viewbox: 48×48
License: MIT

1 other variant in Health Icons

More body icons from Health Icons

antibody anus arm bacteria bladder blood-cells blood-drop blood-vessel body breasts cell-nuclei dna ear enzyme eye female-reproductive-system foot gallbladder head heart-organ intestine joints kidneys leg

Use the colon icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M6 12.194a6.194 6.194 0 0 1 9.972-4.909A6.17 6.17 0 0 1 19.75 6c1.646 0 3.142.642 4.25 1.688A6.17 6.17 0 0 1 28.25 6a6.17 6.17 0 0 1 3.778 1.285a6.194 6.194 0 0 1 8.693 8.68A6.97 6.97 0 0 1 42 20a6.97 6.97 0 0 1-1.45 4.267a6.194 6.194 0 0 1-8.522 8.893a6 6 0 0 1-.815.531l-.026.063a4.4 4.4 0 0 0-.187.722V42h-2v-7.615q0-.09.016-.177c.074-.412.17-.823.304-1.17c.067-.175.154-.362.27-.534a1.54 1.54 0 0 1 .566-.516c.43-.22.816-.511 1.145-.86a1 1 0 0 1 1.454 0a4.194 4.194 0 1 0 5.777-6.067a1 1 0 0 1-.047-1.476A4.98 4.98 0 0 0 40 20a4.98 4.98 0 0 0-1.324-3.389a1 1 0 0 1 .041-1.397a4.195 4.195 0 0 0-2.689-7.208v.03c-.95 0-1.93.47-2.565 1.242c-.615.747-.897 1.758-.514 2.906a1 1 0 1 1-1.898.632c-.438-1.314-.33-2.562.134-3.618A4.18 4.18 0 0 0 28.25 8a4.19 4.19 0 0 0-3.432 1.783a1 1 0 0 1-1.636 0A4.19 4.19 0 0 0 19.75 8a4.18 4.18 0 0 0-3.05 1.316a1 1 0 0 1-1.455 0a4.194 4.194 0 1 0-5.93 5.93a1 1 0 0 1 0 1.453A4.18 4.18 0 0 0 8 19.75c0 1.418.702 2.672 1.783 3.432a1 1 0 0 1 0 1.636a4.196 4.196 0 0 0 1.446 7.515a1 1 0 0 1 .771.974v2.026a.889.889 0 0 0 1.778 0v-2.575a1 1 0 0 1 .502-.868a4.19 4.19 0 0 0 2.109-3.64a4.19 4.19 0 0 0-1.783-3.432a1 1 0 0 1-.154-.135C13.766 24.233 12.947 24 12 24a1 1 0 1 1 0-2c1.13 0 2.188.249 3.121.755a4.18 4.18 0 0 0 1.268-3.005a4.18 4.18 0 0 0-1.316-3.05a1 1 0 0 1 0-1.455q.089-.084.172-.172a1 1 0 0 1 1.454 0a4.18 4.18 0 0 0 3.051 1.316a4.19 4.19 0 0 0 3.432-1.783a1 1 0 0 1 1.636 0a4.19 4.19 0 0 0 3.432 1.783q.614-.002 1.172-.166a1 1 0 0 1 1.161 1.43A5 5 0 0 0 30 20c0 .904.24 1.75.658 2.481c1.139.64 1.885 1.272 2.325 2.004c.519.866.518 1.738.517 2.439V27a1 1 0 1 1-2 0c0-.787-.02-1.133-.233-1.486c-.173-.288-.531-.662-1.35-1.15a1 1 0 0 1-.225-.054a4.194 4.194 0 0 0-3.348 7.678q.158.082.285.186a1 1 0 0 1 .371.777V42h-2v-8.476a6.195 6.195 0 0 1 3.25-11.469h.057a7 7 0 0 1-.12-3.667A6.17 6.17 0 0 1 24 16.702a6.17 6.17 0 0 1-4.25 1.688a6.2 6.2 0 0 1-1.56-.198a6.2 6.2 0 0 1 .199 1.56A6.18 6.18 0 0 1 16.7 24a6.17 6.17 0 0 1 1.688 4.25a6.19 6.19 0 0 1-2.611 5.052v2.03a2.889 2.889 0 0 1-5.778 0v-1.289A6.196 6.196 0 0 1 7.688 24A6.18 6.18 0 0 1 6 19.75a6.17 6.17 0 0 1 1.285-3.778A6.17 6.17 0 0 1 6 12.194"/></svg>

React

import type { SVGProps } from "react";

export function HealthiconsColonOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M6 12.194a6.194 6.194 0 0 1 9.972-4.909A6.17 6.17 0 0 1 19.75 6c1.646 0 3.142.642 4.25 1.688A6.17 6.17 0 0 1 28.25 6a6.17 6.17 0 0 1 3.778 1.285a6.194 6.194 0 0 1 8.693 8.68A6.97 6.97 0 0 1 42 20a6.97 6.97 0 0 1-1.45 4.267a6.194 6.194 0 0 1-8.522 8.893a6 6 0 0 1-.815.531l-.026.063a4.4 4.4 0 0 0-.187.722V42h-2v-7.615q0-.09.016-.177c.074-.412.17-.823.304-1.17c.067-.175.154-.362.27-.534a1.54 1.54 0 0 1 .566-.516c.43-.22.816-.511 1.145-.86a1 1 0 0 1 1.454 0a4.194 4.194 0 1 0 5.777-6.067a1 1 0 0 1-.047-1.476A4.98 4.98 0 0 0 40 20a4.98 4.98 0 0 0-1.324-3.389a1 1 0 0 1 .041-1.397a4.195 4.195 0 0 0-2.689-7.208v.03c-.95 0-1.93.47-2.565 1.242c-.615.747-.897 1.758-.514 2.906a1 1 0 1 1-1.898.632c-.438-1.314-.33-2.562.134-3.618A4.18 4.18 0 0 0 28.25 8a4.19 4.19 0 0 0-3.432 1.783a1 1 0 0 1-1.636 0A4.19 4.19 0 0 0 19.75 8a4.18 4.18 0 0 0-3.05 1.316a1 1 0 0 1-1.455 0a4.194 4.194 0 1 0-5.93 5.93a1 1 0 0 1 0 1.453A4.18 4.18 0 0 0 8 19.75c0 1.418.702 2.672 1.783 3.432a1 1 0 0 1 0 1.636a4.196 4.196 0 0 0 1.446 7.515a1 1 0 0 1 .771.974v2.026a.889.889 0 0 0 1.778 0v-2.575a1 1 0 0 1 .502-.868a4.19 4.19 0 0 0 2.109-3.64a4.19 4.19 0 0 0-1.783-3.432a1 1 0 0 1-.154-.135C13.766 24.233 12.947 24 12 24a1 1 0 1 1 0-2c1.13 0 2.188.249 3.121.755a4.18 4.18 0 0 0 1.268-3.005a4.18 4.18 0 0 0-1.316-3.05a1 1 0 0 1 0-1.455q.089-.084.172-.172a1 1 0 0 1 1.454 0a4.18 4.18 0 0 0 3.051 1.316a4.19 4.19 0 0 0 3.432-1.783a1 1 0 0 1 1.636 0a4.19 4.19 0 0 0 3.432 1.783q.614-.002 1.172-.166a1 1 0 0 1 1.161 1.43A5 5 0 0 0 30 20c0 .904.24 1.75.658 2.481c1.139.64 1.885 1.272 2.325 2.004c.519.866.518 1.738.517 2.439V27a1 1 0 1 1-2 0c0-.787-.02-1.133-.233-1.486c-.173-.288-.531-.662-1.35-1.15a1 1 0 0 1-.225-.054a4.194 4.194 0 0 0-3.348 7.678q.158.082.285.186a1 1 0 0 1 .371.777V42h-2v-8.476a6.195 6.195 0 0 1 3.25-11.469h.057a7 7 0 0 1-.12-3.667A6.17 6.17 0 0 1 24 16.702a6.17 6.17 0 0 1-4.25 1.688a6.2 6.2 0 0 1-1.56-.198a6.2 6.2 0 0 1 .199 1.56A6.18 6.18 0 0 1 16.7 24a6.17 6.17 0 0 1 1.688 4.25a6.19 6.19 0 0 1-2.611 5.052v2.03a2.889 2.889 0 0 1-5.778 0v-1.289A6.196 6.196 0 0 1 7.688 24A6.18 6.18 0 0 1 6 19.75a6.17 6.17 0 0 1 1.285-3.778A6.17 6.17 0 0 1 6 12.194"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M6 12.194a6.194 6.194 0 0 1 9.972-4.909A6.17 6.17 0 0 1 19.75 6c1.646 0 3.142.642 4.25 1.688A6.17 6.17 0 0 1 28.25 6a6.17 6.17 0 0 1 3.778 1.285a6.194 6.194 0 0 1 8.693 8.68A6.97 6.97 0 0 1 42 20a6.97 6.97 0 0 1-1.45 4.267a6.194 6.194 0 0 1-8.522 8.893a6 6 0 0 1-.815.531l-.026.063a4.4 4.4 0 0 0-.187.722V42h-2v-7.615q0-.09.016-.177c.074-.412.17-.823.304-1.17c.067-.175.154-.362.27-.534a1.54 1.54 0 0 1 .566-.516c.43-.22.816-.511 1.145-.86a1 1 0 0 1 1.454 0a4.194 4.194 0 1 0 5.777-6.067a1 1 0 0 1-.047-1.476A4.98 4.98 0 0 0 40 20a4.98 4.98 0 0 0-1.324-3.389a1 1 0 0 1 .041-1.397a4.195 4.195 0 0 0-2.689-7.208v.03c-.95 0-1.93.47-2.565 1.242c-.615.747-.897 1.758-.514 2.906a1 1 0 1 1-1.898.632c-.438-1.314-.33-2.562.134-3.618A4.18 4.18 0 0 0 28.25 8a4.19 4.19 0 0 0-3.432 1.783a1 1 0 0 1-1.636 0A4.19 4.19 0 0 0 19.75 8a4.18 4.18 0 0 0-3.05 1.316a1 1 0 0 1-1.455 0a4.194 4.194 0 1 0-5.93 5.93a1 1 0 0 1 0 1.453A4.18 4.18 0 0 0 8 19.75c0 1.418.702 2.672 1.783 3.432a1 1 0 0 1 0 1.636a4.196 4.196 0 0 0 1.446 7.515a1 1 0 0 1 .771.974v2.026a.889.889 0 0 0 1.778 0v-2.575a1 1 0 0 1 .502-.868a4.19 4.19 0 0 0 2.109-3.64a4.19 4.19 0 0 0-1.783-3.432a1 1 0 0 1-.154-.135C13.766 24.233 12.947 24 12 24a1 1 0 1 1 0-2c1.13 0 2.188.249 3.121.755a4.18 4.18 0 0 0 1.268-3.005a4.18 4.18 0 0 0-1.316-3.05a1 1 0 0 1 0-1.455q.089-.084.172-.172a1 1 0 0 1 1.454 0a4.18 4.18 0 0 0 3.051 1.316a4.19 4.19 0 0 0 3.432-1.783a1 1 0 0 1 1.636 0a4.19 4.19 0 0 0 3.432 1.783q.614-.002 1.172-.166a1 1 0 0 1 1.161 1.43A5 5 0 0 0 30 20c0 .904.24 1.75.658 2.481c1.139.64 1.885 1.272 2.325 2.004c.519.866.518 1.738.517 2.439V27a1 1 0 1 1-2 0c0-.787-.02-1.133-.233-1.486c-.173-.288-.531-.662-1.35-1.15a1 1 0 0 1-.225-.054a4.194 4.194 0 0 0-3.348 7.678q.158.082.285.186a1 1 0 0 1 .371.777V42h-2v-8.476a6.195 6.195 0 0 1 3.25-11.469h.057a7 7 0 0 1-.12-3.667A6.17 6.17 0 0 1 24 16.702a6.17 6.17 0 0 1-4.25 1.688a6.2 6.2 0 0 1-1.56-.198a6.2 6.2 0 0 1 .199 1.56A6.18 6.18 0 0 1 16.7 24a6.17 6.17 0 0 1 1.688 4.25a6.19 6.19 0 0 1-2.611 5.052v2.03a2.889 2.889 0 0 1-5.778 0v-1.289A6.196 6.196 0 0 1 7.688 24A6.18 6.18 0 0 1 6 19.75a6.17 6.17 0 0 1 1.285-3.778A6.17 6.17 0 0 1 6 12.194"/></svg>
</template>

CSS

.icon-colon-outline {
  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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%2012.194a6.194%206.194%200%200%201%209.972-4.909A6.17%206.17%200%200%201%2019.75%206c1.646%200%203.142.642%204.25%201.688A6.17%206.17%200%200%201%2028.25%206a6.17%206.17%200%200%201%203.778%201.285a6.194%206.194%200%200%201%208.693%208.68A6.97%206.97%200%200%201%2042%2020a6.97%206.97%200%200%201-1.45%204.267a6.194%206.194%200%200%201-8.522%208.893a6%206%200%200%201-.815.531l-.026.063a4.4%204.4%200%200%200-.187.722V42h-2v-7.615q0-.09.016-.177c.074-.412.17-.823.304-1.17c.067-.175.154-.362.27-.534a1.54%201.54%200%200%201%20.566-.516c.43-.22.816-.511%201.145-.86a1%201%200%200%201%201.454%200a4.194%204.194%200%201%200%205.777-6.067a1%201%200%200%201-.047-1.476A4.98%204.98%200%200%200%2040%2020a4.98%204.98%200%200%200-1.324-3.389a1%201%200%200%201%20.041-1.397a4.195%204.195%200%200%200-2.689-7.208v.03c-.95%200-1.93.47-2.565%201.242c-.615.747-.897%201.758-.514%202.906a1%201%200%201%201-1.898.632c-.438-1.314-.33-2.562.134-3.618A4.18%204.18%200%200%200%2028.25%208a4.19%204.19%200%200%200-3.432%201.783a1%201%200%200%201-1.636%200A4.19%204.19%200%200%200%2019.75%208a4.18%204.18%200%200%200-3.05%201.316a1%201%200%200%201-1.455%200a4.194%204.194%200%201%200-5.93%205.93a1%201%200%200%201%200%201.453A4.18%204.18%200%200%200%208%2019.75c0%201.418.702%202.672%201.783%203.432a1%201%200%200%201%200%201.636a4.196%204.196%200%200%200%201.446%207.515a1%201%200%200%201%20.771.974v2.026a.889.889%200%200%200%201.778%200v-2.575a1%201%200%200%201%20.502-.868a4.19%204.19%200%200%200%202.109-3.64a4.19%204.19%200%200%200-1.783-3.432a1%201%200%200%201-.154-.135C13.766%2024.233%2012.947%2024%2012%2024a1%201%200%201%201%200-2c1.13%200%202.188.249%203.121.755a4.18%204.18%200%200%200%201.268-3.005a4.18%204.18%200%200%200-1.316-3.05a1%201%200%200%201%200-1.455q.089-.084.172-.172a1%201%200%200%201%201.454%200a4.18%204.18%200%200%200%203.051%201.316a4.19%204.19%200%200%200%203.432-1.783a1%201%200%200%201%201.636%200a4.19%204.19%200%200%200%203.432%201.783q.614-.002%201.172-.166a1%201%200%200%201%201.161%201.43A5%205%200%200%200%2030%2020c0%20.904.24%201.75.658%202.481c1.139.64%201.885%201.272%202.325%202.004c.519.866.518%201.738.517%202.439V27a1%201%200%201%201-2%200c0-.787-.02-1.133-.233-1.486c-.173-.288-.531-.662-1.35-1.15a1%201%200%200%201-.225-.054a4.194%204.194%200%200%200-3.348%207.678q.158.082.285.186a1%201%200%200%201%20.371.777V42h-2v-8.476a6.195%206.195%200%200%201%203.25-11.469h.057a7%207%200%200%201-.12-3.667A6.17%206.17%200%200%201%2024%2016.702a6.17%206.17%200%200%201-4.25%201.688a6.2%206.2%200%200%201-1.56-.198a6.2%206.2%200%200%201%20.199%201.56A6.18%206.18%200%200%201%2016.7%2024a6.17%206.17%200%200%201%201.688%204.25a6.19%206.19%200%200%201-2.611%205.052v2.03a2.889%202.889%200%200%201-5.778%200v-1.289A6.196%206.196%200%200%201%207.688%2024A6.18%206.18%200%200%201%206%2019.75a6.17%206.17%200%200%201%201.285-3.778A6.17%206.17%200%200%201%206%2012.194%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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%2012.194a6.194%206.194%200%200%201%209.972-4.909A6.17%206.17%200%200%201%2019.75%206c1.646%200%203.142.642%204.25%201.688A6.17%206.17%200%200%201%2028.25%206a6.17%206.17%200%200%201%203.778%201.285a6.194%206.194%200%200%201%208.693%208.68A6.97%206.97%200%200%201%2042%2020a6.97%206.97%200%200%201-1.45%204.267a6.194%206.194%200%200%201-8.522%208.893a6%206%200%200%201-.815.531l-.026.063a4.4%204.4%200%200%200-.187.722V42h-2v-7.615q0-.09.016-.177c.074-.412.17-.823.304-1.17c.067-.175.154-.362.27-.534a1.54%201.54%200%200%201%20.566-.516c.43-.22.816-.511%201.145-.86a1%201%200%200%201%201.454%200a4.194%204.194%200%201%200%205.777-6.067a1%201%200%200%201-.047-1.476A4.98%204.98%200%200%200%2040%2020a4.98%204.98%200%200%200-1.324-3.389a1%201%200%200%201%20.041-1.397a4.195%204.195%200%200%200-2.689-7.208v.03c-.95%200-1.93.47-2.565%201.242c-.615.747-.897%201.758-.514%202.906a1%201%200%201%201-1.898.632c-.438-1.314-.33-2.562.134-3.618A4.18%204.18%200%200%200%2028.25%208a4.19%204.19%200%200%200-3.432%201.783a1%201%200%200%201-1.636%200A4.19%204.19%200%200%200%2019.75%208a4.18%204.18%200%200%200-3.05%201.316a1%201%200%200%201-1.455%200a4.194%204.194%200%201%200-5.93%205.93a1%201%200%200%201%200%201.453A4.18%204.18%200%200%200%208%2019.75c0%201.418.702%202.672%201.783%203.432a1%201%200%200%201%200%201.636a4.196%204.196%200%200%200%201.446%207.515a1%201%200%200%201%20.771.974v2.026a.889.889%200%200%200%201.778%200v-2.575a1%201%200%200%201%20.502-.868a4.19%204.19%200%200%200%202.109-3.64a4.19%204.19%200%200%200-1.783-3.432a1%201%200%200%201-.154-.135C13.766%2024.233%2012.947%2024%2012%2024a1%201%200%201%201%200-2c1.13%200%202.188.249%203.121.755a4.18%204.18%200%200%200%201.268-3.005a4.18%204.18%200%200%200-1.316-3.05a1%201%200%200%201%200-1.455q.089-.084.172-.172a1%201%200%200%201%201.454%200a4.18%204.18%200%200%200%203.051%201.316a4.19%204.19%200%200%200%203.432-1.783a1%201%200%200%201%201.636%200a4.19%204.19%200%200%200%203.432%201.783q.614-.002%201.172-.166a1%201%200%200%201%201.161%201.43A5%205%200%200%200%2030%2020c0%20.904.24%201.75.658%202.481c1.139.64%201.885%201.272%202.325%202.004c.519.866.518%201.738.517%202.439V27a1%201%200%201%201-2%200c0-.787-.02-1.133-.233-1.486c-.173-.288-.531-.662-1.35-1.15a1%201%200%200%201-.225-.054a4.194%204.194%200%200%200-3.348%207.678q.158.082.285.186a1%201%200%200%201%20.371.777V42h-2v-8.476a6.195%206.195%200%200%201%203.25-11.469h.057a7%207%200%200%201-.12-3.667A6.17%206.17%200%200%201%2024%2016.702a6.17%206.17%200%200%201-4.25%201.688a6.2%206.2%200%200%201-1.56-.198a6.2%206.2%200%200%201%20.199%201.56A6.18%206.18%200%200%201%2016.7%2024a6.17%206.17%200%200%201%201.688%204.25a6.19%206.19%200%200%201-2.611%205.052v2.03a2.889%202.889%200%200%201-5.778%200v-1.289A6.196%206.196%200%200%201%207.688%2024A6.18%206.18%200%200%201%206%2019.75a6.17%206.17%200%200%201%201.285-3.778A6.17%206.17%200%200%201%206%2012.194%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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