hr from Circle Flags by HatScripts · Circle · MIT Free for personal and commercial use.

Name
hr
Set
Circle Flags
Style
Circle
Viewbox
512×512
License
MIT

The same logo in other sets

Use the hr logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><mask id="SVGqdEcMdXs38"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#SVGqdEcMdXs38)"><path fill="#eee" d="m0 167l253.8-19.3L512 167v178l-254.9 32.3L0 345z"/><path fill="#d80027" d="M0 0h512v167H0z"/><path fill="#0052b4" d="M0 345h512v167H0z"/><path fill="#338af3" d="M322.8 178h-44.5l7.4-55.7l29.7-22.2l29.6 22.2V167zm-133.6 0h44.5l-7.4-55.7l-29.7-22.2l-29.6 22.2V167z"/><path fill="#0052b4" d="M285.7 178h-59.4v-55.7l29.7-22.2l29.7 22.2z"/><path fill="#eee" d="M167 167v122.3a89 89 0 0 0 35.8 71.3l15.5-3.9l19.7 19.8a89 89 0 0 0 18 1.8a89 89 0 0 0 17.9-1.8l22.4-18.7l13 2.8a89 89 0 0 0 35.7-71.3V167z"/><path fill="#d80027" d="M167 167h35.6v35.5H167zm71.2 0h35.6v35.5h-35.6zm71.2 0H345v35.5h-35.6zm-106.8 35.5h35.6v35.6h-35.6zm71.2 0h35.6v35.6h-35.6zM167 238.1h35.6v35.6H167zm35.6 35.6h35.6v35.6h-35.6zm35.6-35.6h35.6v35.6h-35.6zm71.2 0H345v35.6h-35.6zm-35.6 35.6h35.6v35.6h-35.6zm-35.6 35.6h35.6V345h-35.6zm-35.6 0h-33.3c3 13.3 9 25.4 17.3 35.6h16zM309.4 345h16a88.8 88.8 0 0 0 17.3-35.6h-33.3zm-106.8 0v15.6a88.7 88.7 0 0 0 35.6 16V345zm71.2 0v31.6a88.7 88.7 0 0 0 35.6-16V345z"/></g></svg>

React

import type { SVGProps } from "react";

export function CircleFlagsHr(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><mask id="SVGqdEcMdXs38"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#SVGqdEcMdXs38)"><path fill="#eee" d="m0 167l253.8-19.3L512 167v178l-254.9 32.3L0 345z"/><path fill="#d80027" d="M0 0h512v167H0z"/><path fill="#0052b4" d="M0 345h512v167H0z"/><path fill="#338af3" d="M322.8 178h-44.5l7.4-55.7l29.7-22.2l29.6 22.2V167zm-133.6 0h44.5l-7.4-55.7l-29.7-22.2l-29.6 22.2V167z"/><path fill="#0052b4" d="M285.7 178h-59.4v-55.7l29.7-22.2l29.7 22.2z"/><path fill="#eee" d="M167 167v122.3a89 89 0 0 0 35.8 71.3l15.5-3.9l19.7 19.8a89 89 0 0 0 18 1.8a89 89 0 0 0 17.9-1.8l22.4-18.7l13 2.8a89 89 0 0 0 35.7-71.3V167z"/><path fill="#d80027" d="M167 167h35.6v35.5H167zm71.2 0h35.6v35.5h-35.6zm71.2 0H345v35.5h-35.6zm-106.8 35.5h35.6v35.6h-35.6zm71.2 0h35.6v35.6h-35.6zM167 238.1h35.6v35.6H167zm35.6 35.6h35.6v35.6h-35.6zm35.6-35.6h35.6v35.6h-35.6zm71.2 0H345v35.6h-35.6zm-35.6 35.6h35.6v35.6h-35.6zm-35.6 35.6h35.6V345h-35.6zm-35.6 0h-33.3c3 13.3 9 25.4 17.3 35.6h16zM309.4 345h16a88.8 88.8 0 0 0 17.3-35.6h-33.3zm-106.8 0v15.6a88.7 88.7 0 0 0 35.6 16V345zm71.2 0v31.6a88.7 88.7 0 0 0 35.6-16V345z"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><mask id="SVGqdEcMdXs38"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#SVGqdEcMdXs38)"><path fill="#eee" d="m0 167l253.8-19.3L512 167v178l-254.9 32.3L0 345z"/><path fill="#d80027" d="M0 0h512v167H0z"/><path fill="#0052b4" d="M0 345h512v167H0z"/><path fill="#338af3" d="M322.8 178h-44.5l7.4-55.7l29.7-22.2l29.6 22.2V167zm-133.6 0h44.5l-7.4-55.7l-29.7-22.2l-29.6 22.2V167z"/><path fill="#0052b4" d="M285.7 178h-59.4v-55.7l29.7-22.2l29.7 22.2z"/><path fill="#eee" d="M167 167v122.3a89 89 0 0 0 35.8 71.3l15.5-3.9l19.7 19.8a89 89 0 0 0 18 1.8a89 89 0 0 0 17.9-1.8l22.4-18.7l13 2.8a89 89 0 0 0 35.7-71.3V167z"/><path fill="#d80027" d="M167 167h35.6v35.5H167zm71.2 0h35.6v35.5h-35.6zm71.2 0H345v35.5h-35.6zm-106.8 35.5h35.6v35.6h-35.6zm71.2 0h35.6v35.6h-35.6zM167 238.1h35.6v35.6H167zm35.6 35.6h35.6v35.6h-35.6zm35.6-35.6h35.6v35.6h-35.6zm71.2 0H345v35.6h-35.6zm-35.6 35.6h35.6v35.6h-35.6zm-35.6 35.6h35.6V345h-35.6zm-35.6 0h-33.3c3 13.3 9 25.4 17.3 35.6h16zM309.4 345h16a88.8 88.8 0 0 0 17.3-35.6h-33.3zm-106.8 0v15.6a88.7 88.7 0 0 0 35.6 16V345zm71.2 0v31.6a88.7 88.7 0 0 0 35.6-16V345z"/></g></svg>
</template>

CSS

.icon-hr {
  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%20512%20512%22%3E%3Cmask%20id%3D%22SVGqdEcMdXs38%22%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%22256%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23SVGqdEcMdXs38)%22%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22m0%20167l253.8-19.3L512%20167v178l-254.9%2032.3L0%20345z%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M0%200h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M0%20345h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%23338af3%22%20d%3D%22M322.8%20178h-44.5l7.4-55.7l29.7-22.2l29.6%2022.2V167zm-133.6%200h44.5l-7.4-55.7l-29.7-22.2l-29.6%2022.2V167z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M285.7%20178h-59.4v-55.7l29.7-22.2l29.7%2022.2z%22%2F%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M167%20167v122.3a89%2089%200%200%200%2035.8%2071.3l15.5-3.9l19.7%2019.8a89%2089%200%200%200%2018%201.8a89%2089%200%200%200%2017.9-1.8l22.4-18.7l13%202.8a89%2089%200%200%200%2035.7-71.3V167z%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M167%20167h35.6v35.5H167zm71.2%200h35.6v35.5h-35.6zm71.2%200H345v35.5h-35.6zm-106.8%2035.5h35.6v35.6h-35.6zm71.2%200h35.6v35.6h-35.6zM167%20238.1h35.6v35.6H167zm35.6%2035.6h35.6v35.6h-35.6zm35.6-35.6h35.6v35.6h-35.6zm71.2%200H345v35.6h-35.6zm-35.6%2035.6h35.6v35.6h-35.6zm-35.6%2035.6h35.6V345h-35.6zm-35.6%200h-33.3c3%2013.3%209%2025.4%2017.3%2035.6h16zM309.4%20345h16a88.8%2088.8%200%200%200%2017.3-35.6h-33.3zm-106.8%200v15.6a88.7%2088.7%200%200%200%2035.6%2016V345zm71.2%200v31.6a88.7%2088.7%200%200%200%2035.6-16V345z%22%2F%3E%3C%2Fg%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%20512%20512%22%3E%3Cmask%20id%3D%22SVGqdEcMdXs38%22%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%22256%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23SVGqdEcMdXs38)%22%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22m0%20167l253.8-19.3L512%20167v178l-254.9%2032.3L0%20345z%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M0%200h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M0%20345h512v167H0z%22%2F%3E%3Cpath%20fill%3D%22%23338af3%22%20d%3D%22M322.8%20178h-44.5l7.4-55.7l29.7-22.2l29.6%2022.2V167zm-133.6%200h44.5l-7.4-55.7l-29.7-22.2l-29.6%2022.2V167z%22%2F%3E%3Cpath%20fill%3D%22%230052b4%22%20d%3D%22M285.7%20178h-59.4v-55.7l29.7-22.2l29.7%2022.2z%22%2F%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M167%20167v122.3a89%2089%200%200%200%2035.8%2071.3l15.5-3.9l19.7%2019.8a89%2089%200%200%200%2018%201.8a89%2089%200%200%200%2017.9-1.8l22.4-18.7l13%202.8a89%2089%200%200%200%2035.7-71.3V167z%22%2F%3E%3Cpath%20fill%3D%22%23d80027%22%20d%3D%22M167%20167h35.6v35.5H167zm71.2%200h35.6v35.5h-35.6zm71.2%200H345v35.5h-35.6zm-106.8%2035.5h35.6v35.6h-35.6zm71.2%200h35.6v35.6h-35.6zM167%20238.1h35.6v35.6H167zm35.6%2035.6h35.6v35.6h-35.6zm35.6-35.6h35.6v35.6h-35.6zm71.2%200H345v35.6h-35.6zm-35.6%2035.6h35.6v35.6h-35.6zm-35.6%2035.6h35.6V345h-35.6zm-35.6%200h-33.3c3%2013.3%209%2025.4%2017.3%2035.6h16zM309.4%20345h16a88.8%2088.8%200%200%200%2017.3-35.6h-33.3zm-106.8%200v15.6a88.7%2088.7%200%200%200%2035.6%2016V345zm71.2%200v31.6a88.7%2088.7%200%200%200%2035.6-16V345z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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