gentleface

Gentleface › How to use

How to use Gentleface icons

Every icon page has its code ready to copy in every format below, for any of the 6 styles. The code is self-contained.

Keep them crisp

The icons are drawn on a 16 px grid. Show them at 16 px, or at an exact multiple (32, 48), and on whole pixels. A size like 18 px, a position like 7.5 px (centring a 16 px icon in a 31 px box) or a transform blurs every edge.

Accessibility

The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label.

Inline SVG

The SVG uses fill="currentColor", so it takes the text color.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5.5 10.793L12.146 4.146C12.246 4.047 12.364 3.997 12.5 3.997C12.636 3.997 12.754 4.047 12.854 4.146C12.951 4.244 13 4.362 13 4.5C13 4.638 12.951 4.756 12.854 4.854L5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854L2.146 8.854C2.047 8.754 1.997 8.636 1.997 8.5C1.997 8.364 2.047 8.246 2.146 8.146C2.244 8.049 2.362 8 2.5 8C2.638 8 2.756 8.049 2.854 8.146L5.5 10.793Z"/></svg>

React, Vue, Svelte

Each icon page gives a component. React example:

// Gentleface "check" (line-round), MIT. https://gentleface.com/icons/check
import type { SVGProps } from 'react';

export function CheckIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M5.5 10.793L12.146 4.146C12.246 4.047 12.364 3.997 12.5 3.997C12.636 3.997 12.754 4.047 12.854 4.146C12.951 4.244 13 4.362 13 4.5C13 4.638 12.951 4.756 12.854 4.854L5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854L2.146 8.854C2.047 8.754 1.997 8.636 1.997 8.5C1.997 8.364 2.047 8.246 2.146 8.146C2.244 8.049 2.362 8 2.5 8C2.638 8 2.756 8.049 2.854 8.146L5.5 10.793Z" />
    </svg>
  );
}

Many icons at once

  • SVG sprite, one file per style: /sprite/line-round.svg, /sprite/line-soft.svg, /sprite/line-sharp.svg, /sprite/solid-round.svg, /sprite/solid-soft.svg, /sprite/solid-sharp.svg. Serve it from your own origin and reference icons by name:
    <!-- Gentleface "check" (line-round), MIT. https://gentleface.com/icons/check
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#check"/></svg>
  • Iconify JSON: /iconify/gentleface.json, prefix gentleface. Line-round names are bare (gentleface:check). The other styles add a suffix: -soft, -sharp, -solid, -solid-soft, -solid-sharp. Load it with addCollection() from @iconify/react or another Iconify package, or as a custom collection in unplugin-icons, UnoCSS or the Tailwind Iconify plugin.
  • ZIP: /gentleface-svg.zip has every SVG, the sprites, the Iconify JSON and the license. /gentleface-png.zip has every PNG.

CSS

A mask takes the text color, so the icon can live in a stylesheet:

/* Gentleface "check" (line-round), MIT. https://gentleface.com/icons/check. Takes the text color. */
.icon-check {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.5 10.793L12.146 4.146C12.246 4.047 12.364 3.997 12.5 3.997C12.636 3.997 12.754 4.047 12.854 4.146C12.951 4.244 13 4.362 13 4.5C13 4.638 12.951 4.756 12.854 4.854L5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854L2.146 8.854C2.047 8.754 1.997 8.636 1.997 8.5C1.997 8.364 2.047 8.246 2.146 8.146C2.244 8.049 2.362 8 2.5 8C2.638 8 2.756 8.049 2.854 8.146L5.5 10.793Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.5 10.793L12.146 4.146C12.246 4.047 12.364 3.997 12.5 3.997C12.636 3.997 12.754 4.047 12.854 4.146C12.951 4.244 13 4.362 13 4.5C13 4.638 12.951 4.756 12.854 4.854L5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854L2.146 8.854C2.047 8.754 1.997 8.636 1.997 8.5C1.997 8.364 2.047 8.246 2.146 8.146C2.244 8.049 2.362 8 2.5 8C2.638 8 2.756 8.049 2.854 8.146L5.5 10.793Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

PNG

Every style at 16, 32 and 48 px, rendered by the same rasterizer the icons are designed with: https://gentleface.com/png/{style}/{16|32|48}/{name}.png. Black on transparent.

SwiftUI

A Shape with the icon's own path. It needs no asset.

// Gentleface "check" (line-round), MIT. https://gentleface.com/icons/check
import SwiftUI

struct CheckIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 5.5, y: 10.793))
        p.addLine(to: CGPoint(x: 12.146, y: 4.146))
        p.addCurve(to: CGPoint(x: 12.5, y: 3.997), control1: CGPoint(x: 12.246, y: 4.047), control2: CGPoint(x: 12.364, y: 3.997))
        p.addCurve(to: CGPoint(x: 12.854, y: 4.146), control1: CGPoint(x: 12.636, y: 3.997), control2: CGPoint(x: 12.754, y: 4.047))
        p.addCurve(to: CGPoint(x: 13, y: 4.5), control1: CGPoint(x: 12.951, y: 4.244), control2: CGPoint(x: 13, y: 4.362))
        p.addCurve(to: CGPoint(x: 12.854, y: 4.854), control1: CGPoint(x: 13, y: 4.638), control2: CGPoint(x: 12.951, y: 4.756))
        p.addLine(to: CGPoint(x: 5.854, y: 11.854))
        p.addCurve(to: CGPoint(x: 5.5, y: 12.003), control1: CGPoint(x: 5.754, y: 11.953), control2: CGPoint(x: 5.636, y: 12.003))
        p.addCurve(to: CGPoint(x: 5.146, y: 11.854), control1: CGPoint(x: 5.364, y: 12.003), control2: CGPoint(x: 5.246, y: 11.953))
        p.addLine(to: CGPoint(x: 2.146, y: 8.854))
        p.addCurve(to: CGPoint(x: 1.997, y: 8.5), control1: CGPoint(x: 2.047, y: 8.754), control2: CGPoint(x: 1.997, y: 8.636))
        p.addCurve(to: CGPoint(x: 2.146, y: 8.146), control1: CGPoint(x: 1.997, y: 8.364), control2: CGPoint(x: 2.047, y: 8.246))
        p.addCurve(to: CGPoint(x: 2.5, y: 8), control1: CGPoint(x: 2.244, y: 8.049), control2: CGPoint(x: 2.362, y: 8))
        p.addCurve(to: CGPoint(x: 2.854, y: 8.146), control1: CGPoint(x: 2.638, y: 8), control2: CGPoint(x: 2.756, y: 8.049))
        p.addLine(to: CGPoint(x: 5.5, y: 10.793))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// CheckIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.

Jetpack Compose and Android

An ImageVector for Compose, or a vector drawable for Android views:

// Gentleface "check" (line-round), MIT. https://gentleface.com/icons/check
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val CheckIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "check", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M5.5 10.793L12.146 4.146C12.246 4.047 12.364 3.997 12.5 3.997C12.636 3.997 12.754 4.047 12.854 4.146C12.951 4.244 13 4.362 13 4.5C13 4.638 12.951 4.756 12.854 4.854L5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854L2.146 8.854C2.047 8.754 1.997 8.636 1.997 8.5C1.997 8.364 2.047 8.246 2.146 8.146C2.244 8.049 2.362 8 2.5 8C2.638 8 2.756 8.049 2.854 8.146L5.5 10.793Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(CheckIcon, contentDescription = null) tints it with LocalContentColor.

Flutter

A widget that paints the path and takes the color from IconTheme.

See the Flutter tab on any icon page.

For coding agents

Connect the MCP server at https://gentleface.com/mcp: how, for each client.

/llms.txt describes the set and the URL patterns. /icons.json and /icons.txt list every icon with its meanings. Every icon page has a .json and a .md version with all of the above.

Feedback