topic icon
topic from IconPark by ByteDance · Color · Communicate · Apache-2.0 Free for personal and commercial use.
- Name
- topic
- Set
- IconPark
- Style
- Color
- Category
- Communicate
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More communicate icons from IconPark
commentcomment-onecommentscommunicationmessagemessage-emojimessage-failedmessage-onemessage-privacymessage-searchmessage-securitymessage-sentmessage-successmessage-unreadonline-meetingphone-callphone-incomingphone-incoming-onephone-missedphone-offphone-outgoingphone-outgoing-onephone-telephonephone-video-call
Use the topic icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 26.7117 4.53967 29.2974 5.51747 31.6554C6.02232 32.8729 6.64396 34.0297 7.36843 35.1119C7.61157 35.4751 7.15543 37.7711 6 42C10.2289 40.8446 12.5249 40.3884 12.8881 40.6316C13.9703 41.356 15.1271 41.9777 16.3446 42.4825C18.7026 43.4603 21.2883 44 24 44Z"/><path stroke="#fff" stroke-linecap="round" d="M16.6045 19.8201H33.3838"/><path stroke="#fff" stroke-linecap="round" d="M21.8467 15.7378L18.933 32.2622"/><path stroke="#fff" stroke-linecap="round" d="M28.8467 15.7378L25.933 32.2622"/><path stroke="#fff" stroke-linecap="round" d="M14.6045 28H31.3838"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkTopic(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" strokeLinejoin="round" strokeWidth="4"><path fill="#2F88FF" stroke="#000" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 26.7117 4.53967 29.2974 5.51747 31.6554C6.02232 32.8729 6.64396 34.0297 7.36843 35.1119C7.61157 35.4751 7.15543 37.7711 6 42C10.2289 40.8446 12.5249 40.3884 12.8881 40.6316C13.9703 41.356 15.1271 41.9777 16.3446 42.4825C18.7026 43.4603 21.2883 44 24 44Z"/><path stroke="#fff" strokeLinecap="round" d="M16.6045 19.8201H33.3838"/><path stroke="#fff" strokeLinecap="round" d="M21.8467 15.7378L18.933 32.2622"/><path stroke="#fff" strokeLinecap="round" d="M28.8467 15.7378L25.933 32.2622"/><path stroke="#fff" strokeLinecap="round" d="M14.6045 28H31.3838"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 26.7117 4.53967 29.2974 5.51747 31.6554C6.02232 32.8729 6.64396 34.0297 7.36843 35.1119C7.61157 35.4751 7.15543 37.7711 6 42C10.2289 40.8446 12.5249 40.3884 12.8881 40.6316C13.9703 41.356 15.1271 41.9777 16.3446 42.4825C18.7026 43.4603 21.2883 44 24 44Z"/><path stroke="#fff" stroke-linecap="round" d="M16.6045 19.8201H33.3838"/><path stroke="#fff" stroke-linecap="round" d="M21.8467 15.7378L18.933 32.2622"/><path stroke="#fff" stroke-linecap="round" d="M28.8467 15.7378L25.933 32.2622"/><path stroke="#fff" stroke-linecap="round" d="M14.6045 28H31.3838"/></g></svg> </template>
CSS
.icon-topic {
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%3Cg%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20d%3D%22M24%2044C35.0457%2044%2044%2035.0457%2044%2024C44%2012.9543%2035.0457%204%2024%204C12.9543%204%204%2012.9543%204%2024C4%2026.7117%204.53967%2029.2974%205.51747%2031.6554C6.02232%2032.8729%206.64396%2034.0297%207.36843%2035.1119C7.61157%2035.4751%207.15543%2037.7711%206%2042C10.2289%2040.8446%2012.5249%2040.3884%2012.8881%2040.6316C13.9703%2041.356%2015.1271%2041.9777%2016.3446%2042.4825C18.7026%2043.4603%2021.2883%2044%2024%2044Z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M16.6045%2019.8201H33.3838%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M21.8467%2015.7378L18.933%2032.2622%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M28.8467%2015.7378L25.933%2032.2622%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M14.6045%2028H31.3838%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20d%3D%22M24%2044C35.0457%2044%2044%2035.0457%2044%2024C44%2012.9543%2035.0457%204%2024%204C12.9543%204%204%2012.9543%204%2024C4%2026.7117%204.53967%2029.2974%205.51747%2031.6554C6.02232%2032.8729%206.64396%2034.0297%207.36843%2035.1119C7.61157%2035.4751%207.15543%2037.7711%206%2042C10.2289%2040.8446%2012.5249%2040.3884%2012.8881%2040.6316C13.9703%2041.356%2015.1271%2041.9777%2016.3446%2042.4825C18.7026%2043.4603%2021.2883%2044%2024%2044Z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M16.6045%2019.8201H33.3838%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M21.8467%2015.7378L18.933%2032.2622%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M28.8467%2015.7378L25.933%2032.2622%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M14.6045%2028H31.3838%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/topic.svg?color=%231a73e8&size=48
