Embed this icon within HTML

Copy and paste the following SVG code into your HTML file where you want the icon to appear. Then, you can customize the SVG attributes, such as size or color, using inline styling or CSS classes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10ZM5.00695 14.2166C4 14.7342 4 16 4 16L4 18C4 18 4 20 6 20L14 20C16 20 16 18 16 18L16 16C16 16 16 14.7618 15.0258 14.2339M14 20L16 20C21 20 21 14 21 14M20 14C20 13.4477 20.4477 13 21 13C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15C20.4477 15 20 14.5523 20 14ZM10 10L10 10" />
</svg>

Using as a React Component

You can integrate this icon in your React application using our React icons components. First install the package using YARN or NPM:

$ yarn add @josemi-icons/react

Now you can import this icon in your React application

import {BellSchoolIcon} from "@josemi-icons/react";

Alternatively, if you only need this icon jou can just copy and paste the following component into your React application:

const BellSchoolIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em">
        <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10ZM5.00695 14.2166C4 14.7342 4 16 4 16L4 18C4 18 4 20 6 20L14 20C16 20 16 18 16 18L16 16C16 16 16 14.7618 15.0258 14.2339M14 20L16 20C21 20 21 14 21 14M20 14C20 13.4477 20.4477 13 21 13C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15C20.4477 15 20 14.5523 20 14ZM10 10L10 10" />
    </svg>
);

You can now use the icon component in your React application like any other React component.