character phonetic icon

character-phonetic from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name
character-phonetic
Set
Huge Icons
Style
Stroke
Viewbox
24×24
License
MIT

Use the character phonetic icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.827 15.914a4.115 4.115 0 0 1-3.43 3.412c-.32.05-.703.05-1.47.05s-1.15 0-1.47-.05a4.115 4.115 0 0 1-3.43-3.412c-.05-.319-.05-.7-.05-1.463v-3.283m0 0V9.526c0-.762 0-1.144.05-1.463a4.115 4.115 0 0 1 3.43-3.411c.32-.05.703-.05 1.47-.05s1.15 0 1.47.05a4.115 4.115 0 0 1 3.43 3.411c.198 1.244.297 1.866-.092 2.411a2 2 0 0 1-.197.228c-.482.466-1.254.466-2.797.466zm-9.664-4.15c.424-.752 1.59-2.093 3.078-2.356s4.049-.394 5.317 1.165s1.268 3.216 1.268 5.37m0 0c0 1.24-.035 1.638-.149 2.456c-.135.97-.21 2.741-1.382 4.016a5.8 5.8 0 0 1-1.586 1.197c-.73.38-1.783.72-2.893.613c-2.086-.203-3.653-1.4-3.933-3.52c-.183-1.384.472-2.81 1.17-3.521s1.563-1.32 3.053-1.241c1.382.073 4.39.017 5.72 0"/></svg>

React

import type { SVGProps } from "react";

export function HugeiconsCharacterPhonetic(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M21.827 15.914a4.115 4.115 0 0 1-3.43 3.412c-.32.05-.703.05-1.47.05s-1.15 0-1.47-.05a4.115 4.115 0 0 1-3.43-3.412c-.05-.319-.05-.7-.05-1.463v-3.283m0 0V9.526c0-.762 0-1.144.05-1.463a4.115 4.115 0 0 1 3.43-3.411c.32-.05.703-.05 1.47-.05s1.15 0 1.47.05a4.115 4.115 0 0 1 3.43 3.411c.198 1.244.297 1.866-.092 2.411a2 2 0 0 1-.197.228c-.482.466-1.254.466-2.797.466zm-9.664-4.15c.424-.752 1.59-2.093 3.078-2.356s4.049-.394 5.317 1.165s1.268 3.216 1.268 5.37m0 0c0 1.24-.035 1.638-.149 2.456c-.135.97-.21 2.741-1.382 4.016a5.8 5.8 0 0 1-1.586 1.197c-.73.38-1.783.72-2.893.613c-2.086-.203-3.653-1.4-3.933-3.52c-.183-1.384.472-2.81 1.17-3.521s1.563-1.32 3.053-1.241c1.382.073 4.39.017 5.72 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.827 15.914a4.115 4.115 0 0 1-3.43 3.412c-.32.05-.703.05-1.47.05s-1.15 0-1.47-.05a4.115 4.115 0 0 1-3.43-3.412c-.05-.319-.05-.7-.05-1.463v-3.283m0 0V9.526c0-.762 0-1.144.05-1.463a4.115 4.115 0 0 1 3.43-3.411c.32-.05.703-.05 1.47-.05s1.15 0 1.47.05a4.115 4.115 0 0 1 3.43 3.411c.198 1.244.297 1.866-.092 2.411a2 2 0 0 1-.197.228c-.482.466-1.254.466-2.797.466zm-9.664-4.15c.424-.752 1.59-2.093 3.078-2.356s4.049-.394 5.317 1.165s1.268 3.216 1.268 5.37m0 0c0 1.24-.035 1.638-.149 2.456c-.135.97-.21 2.741-1.382 4.016a5.8 5.8 0 0 1-1.586 1.197c-.73.38-1.783.72-2.893.613c-2.086-.203-3.653-1.4-3.933-3.52c-.183-1.384.472-2.81 1.17-3.521s1.563-1.32 3.053-1.241c1.382.073 4.39.017 5.72 0"/></svg>
</template>

CSS

.icon-character-phonetic {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M21.827%2015.914a4.115%204.115%200%200%201-3.43%203.412c-.32.05-.703.05-1.47.05s-1.15%200-1.47-.05a4.115%204.115%200%200%201-3.43-3.412c-.05-.319-.05-.7-.05-1.463v-3.283m0%200V9.526c0-.762%200-1.144.05-1.463a4.115%204.115%200%200%201%203.43-3.411c.32-.05.703-.05%201.47-.05s1.15%200%201.47.05a4.115%204.115%200%200%201%203.43%203.411c.198%201.244.297%201.866-.092%202.411a2%202%200%200%201-.197.228c-.482.466-1.254.466-2.797.466zm-9.664-4.15c.424-.752%201.59-2.093%203.078-2.356s4.049-.394%205.317%201.165s1.268%203.216%201.268%205.37m0%200c0%201.24-.035%201.638-.149%202.456c-.135.97-.21%202.741-1.382%204.016a5.8%205.8%200%200%201-1.586%201.197c-.73.38-1.783.72-2.893.613c-2.086-.203-3.653-1.4-3.933-3.52c-.183-1.384.472-2.81%201.17-3.521s1.563-1.32%203.053-1.241c1.382.073%204.39.017%205.72%200%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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M21.827%2015.914a4.115%204.115%200%200%201-3.43%203.412c-.32.05-.703.05-1.47.05s-1.15%200-1.47-.05a4.115%204.115%200%200%201-3.43-3.412c-.05-.319-.05-.7-.05-1.463v-3.283m0%200V9.526c0-.762%200-1.144.05-1.463a4.115%204.115%200%200%201%203.43-3.411c.32-.05.703-.05%201.47-.05s1.15%200%201.47.05a4.115%204.115%200%200%201%203.43%203.411c.198%201.244.297%201.866-.092%202.411a2%202%200%200%201-.197.228c-.482.466-1.254.466-2.797.466zm-9.664-4.15c.424-.752%201.59-2.093%203.078-2.356s4.049-.394%205.317%201.165s1.268%203.216%201.268%205.37m0%200c0%201.24-.035%201.638-.149%202.456c-.135.97-.21%202.741-1.382%204.016a5.8%205.8%200%200%201-1.586%201.197c-.73.38-1.783.72-2.893.613c-2.086-.203-3.653-1.4-3.933-3.52c-.183-1.384.472-2.81%201.17-3.521s1.563-1.32%203.053-1.241c1.382.073%204.39.017%205.72%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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