Matita/icons

Git branch icon

A free pencil-style git branch icon, drawn by code from 1 line, 2 circles and 1 curve. Use it as an SVG, a React component, or by name. MIT licensed.

Copy the code All 173 icons
git-branch

01Use it

Use git-branch

One package, four ways in. The icon inherits currentColor and is decorative unless you give it a title. Install it with npm i @matita/icons.

React

import { GitBranch } from '@matita/icons/react';

<GitBranch size={24} />

// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="git-branch" />

JavaScript

import { GitBranch, toSvg } from '@matita/icons';

toSvg(GitBranch, { size: 24 });   // SVG string

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" overflow="visible" class="sketch-icon sketch-icon-git-branch" data-sketch="" aria-hidden="true"><path d="M6.49 3.04Q6.05 9.23 6.37 15.41" stroke-width="1.728"/><path d="M8.64 19.24C8.55 19.37 8.32 19.85 8.06 20.07C7.81 20.28 7.44 20.45 7.1 20.52C6.76 20.59 6.38 20.55 6.03 20.49C5.68 20.44 5.31 20.37 5 20.2C4.7 20.03 4.42 19.76 4.2 19.48C3.98 19.2 3.77 18.86 3.69 18.51C3.61 18.17 3.64 17.77 3.71 17.41C3.78 17.06 3.93 16.7 4.13 16.39C4.34 16.07 4.61 15.76 4.93 15.55C5.25 15.34 5.66 15.2 6.05 15.12C6.44 15.05 6.88 15.02 7.27 15.1C7.67 15.18 8.08 15.37 8.4 15.61C8.72 15.85 8.98 16.19 9.2 16.53C9.41 16.87 9.62 17.26 9.69 17.65C9.75 18.04 9.68 18.49 9.57 18.88C9.46 19.27 9.26 19.68 9 20C8.74 20.33 8.18 20.69 8.01 20.83" stroke-width="1.808"/><path d="M18.06 4.03C18.22 4.09 18.74 4.21 19.02 4.39C19.31 4.58 19.6 4.84 19.77 5.13C19.94 5.42 19.98 5.79 20.03 6.13C20.08 6.47 20.15 6.84 20.08 7.17C20.01 7.51 19.83 7.85 19.62 8.13C19.42 8.42 19.13 8.67 18.83 8.86C18.53 9.06 18.16 9.24 17.8 9.29C17.45 9.34 17.05 9.26 16.69 9.17C16.32 9.07 15.93 8.95 15.63 8.73C15.33 8.5 15.07 8.16 14.89 7.83C14.71 7.49 14.58 7.09 14.54 6.71C14.5 6.33 14.53 5.9 14.65 5.53C14.77 5.16 15.01 4.81 15.27 4.5C15.52 4.2 15.83 3.88 16.18 3.7C16.54 3.51 16.98 3.42 17.39 3.39C17.8 3.37 18.25 3.42 18.64 3.55C19.03 3.69 19.43 3.92 19.74 4.2C20.05 4.48 20.38 5.06 20.51 5.24" stroke-width="1.68"/><path d="M17.55 8.48Q17.45 15.9 8.88 17.4" stroke-width="1.536"/></svg>

Pencil variant

import '@matita/icons/pencil.css';
import { GitBranch } from '@matita/icons/react';

<GitBranch size={32} pencil />

The file is icons/git-branch.svg in the package (pencil/git-branch.svg for the pencil variant). Matita 0.2.1.

02How it's drawn

The recipe for git-branch

Git branch is not stored as a drawing. It is a recipe of 1 line, 2 circles and 1 curve on a 24 by 24 grid, and a small program draws it like a pencil would. The wobble comes from the name, so it always comes out the same.

A · Recipe
L 6.5 3.5 6.5 15;
C 6.5 18 2.5;
C 17.5 6.5 2.5;
Q 17.5 9 17.5 16 9.2 17.5
B · Plotted
C · Drawn
How it works

03Takes, sizes, pencil

Same icon, every way

Pass a seed for another take of the same recipe. The wobble is capped, so it still reads at 16 px.

seed 0
seed 1
seed 2
seed 3
seed 4

Five seeds of git-branch. Seed 0 is the default.

16 px
20 px
24 px
32 px
48 px
96 px

True pixel sizes.

Ink
Pencil