vector-circle
v0.7.0
Customize icon
Set your custom size or color and download the icon as SVG or PNG image.
Width
Height
Color
Get SVG
Get PNG
Using as SVG
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="M11 3C11 3 10 3 10 4L10 6C10 7 11 7 11 7L13 7C13 7 14 7 14 6L14 4C14 3 13 3 13 3L11 3ZM18 10C18 10 17 10 17 11L17 13C17 14 18 14 18 14L20 14C20 14 21 14 21 13L21 11C21 10 20 10 20 10L18 10ZM11 17C11 17 10 17 10 18L10 20C10 21 11 21 11 21L13 21C13 21 14 21 14 20L14 18C14 17 13 17 13 17L11 17ZM4 10C4 10 3 10 3 11L3 13C3 14 4 14 4 14L6 14C6 14 7 14 7 13L7 11C7 10 6 10 6 10L4 10ZM5 14C5 17 7 19 10 19M5 10C5 7 7 5 10 5M14 19C17 19 19 17 19 14M14 5C17 5 19 7 19 10" />
</svg>
Using with React
Install
@josemi-icons/react and import the icon component in your React application:
import {VectorCircleIcon} from "@josemi-icons/react";
const MyComponent = () => {
return (
<VectorCircleIcon />
);
};
Using with CSS
Install
@josemi-icons/css and include the icon as a CSS class:
<i class="ji-vector-circle"></i>