category search icon

category-search-outline-rounded from Material Symbols by Google · Outline Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: category-search-outline-rounded
Set: Material Symbols
Style: Outline Rounded
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0

3 other variants in Material Symbols

category-search category-search-outline category-search-rounded

The same icon in other sets

category-searchMaterial Symbols Light

More ui actions icons from Material Symbols

Use the category search icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 20.5q-.425 0-.712-.288T2 19.5v-6q0-.425.288-.712T3 12.5h6q.425 0 .713.288T10 13.5v6q0 .425-.288.713T9 20.5zm1-2h4v-4H4zM14.725 10h-7.45q-.575 0-.862-.513t.012-1.012L10.15 2.4q.3-.5.85-.5t.85.5l3.725 6.075q.3.5.013 1.013t-.863.512M9.05 8h3.9L11 4.85zm11.825 14.25l-1.95-1.95q-.525.35-1.137.525T16.5 21q-1.875 0-3.187-1.312T12 16.5t1.313-3.187T16.5 12t3.188 1.313T21 16.5q0 .65-.175 1.263t-.5 1.137l1.95 1.95q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-2.6-3.975Q19 17.55 19 16.5t-.725-1.775T16.5 14t-1.775.725T14 16.5t.725 1.775T16.5 19t1.775-.725M11 8"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsCategorySearchOutlineRounded(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 20.5q-.425 0-.712-.288T2 19.5v-6q0-.425.288-.712T3 12.5h6q.425 0 .713.288T10 13.5v6q0 .425-.288.713T9 20.5zm1-2h4v-4H4zM14.725 10h-7.45q-.575 0-.862-.513t.012-1.012L10.15 2.4q.3-.5.85-.5t.85.5l3.725 6.075q.3.5.013 1.013t-.863.512M9.05 8h3.9L11 4.85zm11.825 14.25l-1.95-1.95q-.525.35-1.137.525T16.5 21q-1.875 0-3.187-1.312T12 16.5t1.313-3.187T16.5 12t3.188 1.313T21 16.5q0 .65-.175 1.263t-.5 1.137l1.95 1.95q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-2.6-3.975Q19 17.55 19 16.5t-.725-1.775T16.5 14t-1.775.725T14 16.5t.725 1.775T16.5 19t1.775-.725M11 8"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 20.5q-.425 0-.712-.288T2 19.5v-6q0-.425.288-.712T3 12.5h6q.425 0 .713.288T10 13.5v6q0 .425-.288.713T9 20.5zm1-2h4v-4H4zM14.725 10h-7.45q-.575 0-.862-.513t.012-1.012L10.15 2.4q.3-.5.85-.5t.85.5l3.725 6.075q.3.5.013 1.013t-.863.512M9.05 8h3.9L11 4.85zm11.825 14.25l-1.95-1.95q-.525.35-1.137.525T16.5 21q-1.875 0-3.187-1.312T12 16.5t1.313-3.187T16.5 12t3.188 1.313T21 16.5q0 .65-.175 1.263t-.5 1.137l1.95 1.95q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-2.6-3.975Q19 17.55 19 16.5t-.725-1.775T16.5 14t-1.775.725T14 16.5t.725 1.775T16.5 19t1.775-.725M11 8"/></svg>
</template>

CSS

.icon-category-search-outline-rounded {
  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%22currentColor%22%20d%3D%22M3%2020.5q-.425%200-.712-.288T2%2019.5v-6q0-.425.288-.712T3%2012.5h6q.425%200%20.713.288T10%2013.5v6q0%20.425-.288.713T9%2020.5zm1-2h4v-4H4zM14.725%2010h-7.45q-.575%200-.862-.513t.012-1.012L10.15%202.4q.3-.5.85-.5t.85.5l3.725%206.075q.3.5.013%201.013t-.863.512M9.05%208h3.9L11%204.85zm11.825%2014.25l-1.95-1.95q-.525.35-1.137.525T16.5%2021q-1.875%200-3.187-1.312T12%2016.5t1.313-3.187T16.5%2012t3.188%201.313T21%2016.5q0%20.65-.175%201.263t-.5%201.137l1.95%201.95q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-2.6-3.975Q19%2017.55%2019%2016.5t-.725-1.775T16.5%2014t-1.775.725T14%2016.5t.725%201.775T16.5%2019t1.775-.725M11%208%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%22currentColor%22%20d%3D%22M3%2020.5q-.425%200-.712-.288T2%2019.5v-6q0-.425.288-.712T3%2012.5h6q.425%200%20.713.288T10%2013.5v6q0%20.425-.288.713T9%2020.5zm1-2h4v-4H4zM14.725%2010h-7.45q-.575%200-.862-.513t.012-1.012L10.15%202.4q.3-.5.85-.5t.85.5l3.725%206.075q.3.5.013%201.013t-.863.512M9.05%208h3.9L11%204.85zm11.825%2014.25l-1.95-1.95q-.525.35-1.137.525T16.5%2021q-1.875%200-3.187-1.312T12%2016.5t1.313-3.187T16.5%2012t3.188%201.313T21%2016.5q0%20.65-.175%201.263t-.5%201.137l1.95%201.95q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-2.6-3.975Q19%2017.55%2019%2016.5t-.725-1.775T16.5%2014t-1.775.725T14%2016.5t.725%201.775T16.5%2019t1.775-.725M11%208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/category-search-outline-rounded.svg?color=%231a73e8&size=48