# religion-christianity icon Religion christianity. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/religion-christianity - Category: Religion & belief - Use it for: christianity, christian, cross religious, church faith - Tags: christianity, christian, cross, latin-cross, church, religion, belief, faith, symbol - Family: religion-bahai, religion-buddhism, religion-faith, religion-hinduism, religion-islam, religion-judaism, religion-shinto, religion-sikhism, religion-taoism, saint - Component name: ReligionChristianityIcon - Added: 2026-11-07 - Since: version 0.6.0 - npm: `import { ReligionChristianityIcon } from '@gentleface/react';` (@gentleface/react 0.6.0) ## Files Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. - line-round: https://gentleface.com/svg/line-round/16/religion-christianity.svg · PNG https://gentleface.com/png/line-round/16/religion-christianity.png · https://gentleface.com/png/line-round/32/religion-christianity.png · https://gentleface.com/png/line-round/48/religion-christianity.png - line-soft: https://gentleface.com/svg/line-soft/16/religion-christianity.svg · PNG https://gentleface.com/png/line-soft/16/religion-christianity.png · https://gentleface.com/png/line-soft/32/religion-christianity.png · https://gentleface.com/png/line-soft/48/religion-christianity.png - line-sharp: https://gentleface.com/svg/line-sharp/16/religion-christianity.svg · PNG https://gentleface.com/png/line-sharp/16/religion-christianity.png · https://gentleface.com/png/line-sharp/32/religion-christianity.png · https://gentleface.com/png/line-sharp/48/religion-christianity.png - solid-round: https://gentleface.com/svg/solid-round/16/religion-christianity.svg · PNG https://gentleface.com/png/solid-round/16/religion-christianity.png · https://gentleface.com/png/solid-round/32/religion-christianity.png · https://gentleface.com/png/solid-round/48/religion-christianity.png - solid-soft: https://gentleface.com/svg/solid-soft/16/religion-christianity.svg · PNG https://gentleface.com/png/solid-soft/16/religion-christianity.png · https://gentleface.com/png/solid-soft/32/religion-christianity.png · https://gentleface.com/png/solid-soft/48/religion-christianity.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/religion-christianity.svg · PNG https://gentleface.com/png/solid-sharp/16/religion-christianity.png · https://gentleface.com/png/solid-sharp/32/religion-christianity.png · https://gentleface.com/png/solid-sharp/48/religion-christianity.png The SVG of every style: https://gentleface.com/icons/religion-christianity.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "religion-christianity" (line-round), MIT. https://gentleface.com/icons/religion-christianity import type { SVGProps } from 'react'; export function ReligionChristianityIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "religion-christianity" (line-round), MIT. https://gentleface.com/icons/religion-christianity. Takes the text color. */ .icon-religion-christianity { 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='M12 4C12.276 4 12.512 4.098 12.707 4.293C12.902 4.488 13 4.724 13 5L13 7C13 7.276 12.902 7.512 12.707 7.707C12.512 7.902 12.276 8 12 8L10 8L10 14C10 14.276 9.902 14.512 9.707 14.707C9.512 14.902 9.276 15 9 15L7 15C6.724 15 6.488 14.902 6.293 14.707C6.098 14.512 6 14.276 6 14L6 8L4 8C3.724 8 3.488 7.902 3.293 7.707C3.098 7.512 3 7.276 3 7L3 5C3 4.724 3.098 4.488 3.293 4.293C3.488 4.098 3.724 4 4 4L6 4L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L9 1C9.276 1 9.512 1.098 9.707 1.293C9.902 1.488 10 1.724 10 2L10 4L12 4ZM6.707 4.707C6.512 4.902 6.276 5 6 5L4 5L4 7L6 7C6.276 7 6.512 7.098 6.707 7.293C6.902 7.488 7 7.724 7 8L7 14L9 14L9 8C9 7.724 9.098 7.488 9.293 7.293C9.488 7.098 9.724 7 10 7L12 7L12 5L10 5C9.724 5 9.488 4.902 9.293 4.707C9.098 4.512 9 4.276 9 4L9 2L7 2L7 4C7 4.276 6.902 4.512 6.707 4.707Z'/%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='M12 4C12.276 4 12.512 4.098 12.707 4.293C12.902 4.488 13 4.724 13 5L13 7C13 7.276 12.902 7.512 12.707 7.707C12.512 7.902 12.276 8 12 8L10 8L10 14C10 14.276 9.902 14.512 9.707 14.707C9.512 14.902 9.276 15 9 15L7 15C6.724 15 6.488 14.902 6.293 14.707C6.098 14.512 6 14.276 6 14L6 8L4 8C3.724 8 3.488 7.902 3.293 7.707C3.098 7.512 3 7.276 3 7L3 5C3 4.724 3.098 4.488 3.293 4.293C3.488 4.098 3.724 4 4 4L6 4L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L9 1C9.276 1 9.512 1.098 9.707 1.293C9.902 1.488 10 1.724 10 2L10 4L12 4ZM6.707 4.707C6.512 4.902 6.276 5 6 5L4 5L4 7L6 7C6.276 7 6.512 7.098 6.707 7.293C6.902 7.488 7 7.724 7 8L7 14L9 14L9 8C9 7.724 9.098 7.488 9.293 7.293C9.488 7.098 9.724 7 10 7L12 7L12 5L10 5C9.724 5 9.488 4.902 9.293 4.707C9.098 4.512 9 4.276 9 4L9 2L7 2L7 4C7 4.276 6.902 4.512 6.707 4.707Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text 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='M12 4C12.276 4 12.512 4.098 12.707 4.293C12.902 4.488 13 4.724 13 5L13 7C13 7.276 12.902 7.512 12.707 7.707C12.512 7.902 12.276 8 12 8L10 8L10 14C10 14.276 9.902 14.512 9.707 14.707C9.512 14.902 9.276 15 9 15L7 15C6.724 15 6.488 14.902 6.293 14.707C6.098 14.512 6 14.276 6 14L6 8L4 8C3.724 8 3.488 7.902 3.293 7.707C3.098 7.512 3 7.276 3 7L3 5C3 4.724 3.098 4.488 3.293 4.293C3.488 4.098 3.724 4 4 4L6 4L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L9 1C9.276 1 9.512 1.098 9.707 1.293C9.902 1.488 10 1.724 10 2L10 4L12 4ZM6.707 4.707C6.512 4.902 6.276 5 6 5L4 5L4 7L6 7C6.276 7 6.512 7.098 6.707 7.293C6.902 7.488 7 7.724 7 8L7 14L9 14L9 8C9 7.724 9.098 7.488 9.293 7.293C9.488 7.098 9.724 7 10 7L12 7L12 5L10 5C9.724 5 9.488 4.902 9.293 4.707C9.098 4.512 9 4.276 9 4L9 2L7 2L7 4C7 4.276 6.902 4.512 6.707 4.707Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "religion-christianity" (line-round), MIT. https://gentleface.com/icons/religion-christianity import SwiftUI struct ReligionChristianityIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 12, y: 4)) p.addCurve(to: CGPoint(x: 12.707, y: 4.293), control1: CGPoint(x: 12.276, y: 4), control2: CGPoint(x: 12.512, y: 4.098)) p.addCurve(to: CGPoint(x: 13, y: 5), control1: CGPoint(x: 12.902, y: 4.488), control2: CGPoint(x: 13, y: 4.724)) p.addLine(to: CGPoint(x: 13, y: 7)) p.addCurve(to: CGPoint(x: 12.707, y: 7.707), control1: CGPoint(x: 13, y: 7.276), control2: CGPoint(x: 12.902, y: 7.512)) p.addCurve(to: CGPoint(x: 12, y: 8), control1: CGPoint(x: 12.512, y: 7.902), control2: CGPoint(x: 12.276, y: 8)) p.addLine(to: CGPoint(x: 10, y: 8)) p.addLine(to: CGPoint(x: 10, y: 14)) p.addCurve(to: CGPoint(x: 9.707, y: 14.707), control1: CGPoint(x: 10, y: 14.276), control2: CGPoint(x: 9.902, y: 14.512)) p.addCurve(to: CGPoint(x: 9, y: 15), control1: CGPoint(x: 9.512, y: 14.902), control2: CGPoint(x: 9.276, y: 15)) p.addLine(to: CGPoint(x: 7, y: 15)) p.addCurve(to: CGPoint(x: 6.293, y: 14.707), control1: CGPoint(x: 6.724, y: 15), control2: CGPoint(x: 6.488, y: 14.902)) p.addCurve(to: CGPoint(x: 6, y: 14), control1: CGPoint(x: 6.098, y: 14.512), control2: CGPoint(x: 6, y: 14.276)) p.addLine(to: CGPoint(x: 6, y: 8)) p.addLine(to: CGPoint(x: 4, y: 8)) p.addCurve(to: CGPoint(x: 3.293, y: 7.707), control1: CGPoint(x: 3.724, y: 8), control2: CGPoint(x: 3.488, y: 7.902)) p.addCurve(to: CGPoint(x: 3, y: 7), control1: CGPoint(x: 3.098, y: 7.512), control2: CGPoint(x: 3, y: 7.276)) p.addLine(to: CGPoint(x: 3, y: 5)) p.addCurve(to: CGPoint(x: 3.293, y: 4.293), control1: CGPoint(x: 3, y: 4.724), control2: CGPoint(x: 3.098, y: 4.488)) p.addCurve(to: CGPoint(x: 4, y: 4), control1: CGPoint(x: 3.488, y: 4.098), control2: CGPoint(x: 3.724, y: 4)) p.addLine(to: CGPoint(x: 6, y: 4)) p.addLine(to: CGPoint(x: 6, y: 2)) p.addCurve(to: CGPoint(x: 6.293, y: 1.293), control1: CGPoint(x: 6, y: 1.724), control2: CGPoint(x: 6.098, y: 1.488)) p.addCurve(to: CGPoint(x: 7, y: 1), control1: CGPoint(x: 6.488, y: 1.098), control2: CGPoint(x: 6.724, y: 1)) p.addLine(to: CGPoint(x: 9, y: 1)) p.addCurve(to: CGPoint(x: 9.707, y: 1.293), control1: CGPoint(x: 9.276, y: 1), control2: CGPoint(x: 9.512, y: 1.098)) p.addCurve(to: CGPoint(x: 10, y: 2), control1: CGPoint(x: 9.902, y: 1.488), control2: CGPoint(x: 10, y: 1.724)) p.addLine(to: CGPoint(x: 10, y: 4)) p.addLine(to: CGPoint(x: 12, y: 4)) p.closeSubpath() p.move(to: CGPoint(x: 6.707, y: 4.707)) p.addCurve(to: CGPoint(x: 6, y: 5), control1: CGPoint(x: 6.512, y: 4.902), control2: CGPoint(x: 6.276, y: 5)) p.addLine(to: CGPoint(x: 4, y: 5)) p.addLine(to: CGPoint(x: 4, y: 7)) p.addLine(to: CGPoint(x: 6, y: 7)) p.addCurve(to: CGPoint(x: 6.707, y: 7.293), control1: CGPoint(x: 6.276, y: 7), control2: CGPoint(x: 6.512, y: 7.098)) p.addCurve(to: CGPoint(x: 7, y: 8), control1: CGPoint(x: 6.902, y: 7.488), control2: CGPoint(x: 7, y: 7.724)) p.addLine(to: CGPoint(x: 7, y: 14)) p.addLine(to: CGPoint(x: 9, y: 14)) p.addLine(to: CGPoint(x: 9, y: 8)) p.addCurve(to: CGPoint(x: 9.293, y: 7.293), control1: CGPoint(x: 9, y: 7.724), control2: CGPoint(x: 9.098, y: 7.488)) p.addCurve(to: CGPoint(x: 10, y: 7), control1: CGPoint(x: 9.488, y: 7.098), control2: CGPoint(x: 9.724, y: 7)) p.addLine(to: CGPoint(x: 12, y: 7)) p.addLine(to: CGPoint(x: 12, y: 5)) p.addLine(to: CGPoint(x: 10, y: 5)) p.addCurve(to: CGPoint(x: 9.293, y: 4.707), control1: CGPoint(x: 9.724, y: 5), control2: CGPoint(x: 9.488, y: 4.902)) p.addCurve(to: CGPoint(x: 9, y: 4), control1: CGPoint(x: 9.098, y: 4.512), control2: CGPoint(x: 9, y: 4.276)) p.addLine(to: CGPoint(x: 9, y: 2)) p.addLine(to: CGPoint(x: 7, y: 2)) p.addLine(to: CGPoint(x: 7, y: 4)) p.addCurve(to: CGPoint(x: 6.707, y: 4.707), control1: CGPoint(x: 7, y: 4.276), control2: CGPoint(x: 6.902, y: 4.512)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ReligionChristianityIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "religion-christianity" (line-round), MIT. https://gentleface.com/icons/religion-christianity 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 ReligionChristianityIcon: ImageVector by lazy { ImageVector.Builder( name = "religion-christianity", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M12 4C12.276 4 12.512 4.098 12.707 4.293C12.902 4.488 13 4.724 13 5L13 7C13 7.276 12.902 7.512 12.707 7.707C12.512 7.902 12.276 8 12 8L10 8L10 14C10 14.276 9.902 14.512 9.707 14.707C9.512 14.902 9.276 15 9 15L7 15C6.724 15 6.488 14.902 6.293 14.707C6.098 14.512 6 14.276 6 14L6 8L4 8C3.724 8 3.488 7.902 3.293 7.707C3.098 7.512 3 7.276 3 7L3 5C3 4.724 3.098 4.488 3.293 4.293C3.488 4.098 3.724 4 4 4L6 4L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L9 1C9.276 1 9.512 1.098 9.707 1.293C9.902 1.488 10 1.724 10 2L10 4L12 4ZM6.707 4.707C6.512 4.902 6.276 5 6 5L4 5L4 7L6 7C6.276 7 6.512 7.098 6.707 7.293C6.902 7.488 7 7.724 7 8L7 14L9 14L9 8C9 7.724 9.098 7.488 9.293 7.293C9.488 7.098 9.724 7 10 7L12 7L12 5L10 5C9.724 5 9.488 4.902 9.293 4.707C9.098 4.512 9 4.276 9 4L9 2L7 2L7 4C7 4.276 6.902 4.512 6.707 4.707Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ReligionChristianityIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "religion-christianity" (line-round), MIT. https://gentleface.com/icons/religion-christianity import 'package:flutter/widgets.dart'; class ReligionChristianityIcon extends StatelessWidget { const ReligionChristianityIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ReligionChristianityIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ReligionChristianityIconPainter extends CustomPainter { _ReligionChristianityIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(12, 4) ..cubicTo(12.276, 4, 12.512, 4.098, 12.707, 4.293) ..cubicTo(12.902, 4.488, 13, 4.724, 13, 5) ..lineTo(13, 7) ..cubicTo(13, 7.276, 12.902, 7.512, 12.707, 7.707) ..cubicTo(12.512, 7.902, 12.276, 8, 12, 8) ..lineTo(10, 8) ..lineTo(10, 14) ..cubicTo(10, 14.276, 9.902, 14.512, 9.707, 14.707) ..cubicTo(9.512, 14.902, 9.276, 15, 9, 15) ..lineTo(7, 15) ..cubicTo(6.724, 15, 6.488, 14.902, 6.293, 14.707) ..cubicTo(6.098, 14.512, 6, 14.276, 6, 14) ..lineTo(6, 8) ..lineTo(4, 8) ..cubicTo(3.724, 8, 3.488, 7.902, 3.293, 7.707) ..cubicTo(3.098, 7.512, 3, 7.276, 3, 7) ..lineTo(3, 5) ..cubicTo(3, 4.724, 3.098, 4.488, 3.293, 4.293) ..cubicTo(3.488, 4.098, 3.724, 4, 4, 4) ..lineTo(6, 4) ..lineTo(6, 2) ..cubicTo(6, 1.724, 6.098, 1.488, 6.293, 1.293) ..cubicTo(6.488, 1.098, 6.724, 1, 7, 1) ..lineTo(9, 1) ..cubicTo(9.276, 1, 9.512, 1.098, 9.707, 1.293) ..cubicTo(9.902, 1.488, 10, 1.724, 10, 2) ..lineTo(10, 4) ..lineTo(12, 4) ..close() ..moveTo(6.707, 4.707) ..cubicTo(6.512, 4.902, 6.276, 5, 6, 5) ..lineTo(4, 5) ..lineTo(4, 7) ..lineTo(6, 7) ..cubicTo(6.276, 7, 6.512, 7.098, 6.707, 7.293) ..cubicTo(6.902, 7.488, 7, 7.724, 7, 8) ..lineTo(7, 14) ..lineTo(9, 14) ..lineTo(9, 8) ..cubicTo(9, 7.724, 9.098, 7.488, 9.293, 7.293) ..cubicTo(9.488, 7.098, 9.724, 7, 10, 7) ..lineTo(12, 7) ..lineTo(12, 5) ..lineTo(10, 5) ..cubicTo(9.724, 5, 9.488, 4.902, 9.293, 4.707) ..cubicTo(9.098, 4.512, 9, 4.276, 9, 4) ..lineTo(9, 2) ..lineTo(7, 2) ..lineTo(7, 4) ..cubicTo(7, 4.276, 6.902, 4.512, 6.707, 4.707) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ReligionChristianityIconPainter old) => old.color != color; } ```