<!--
{
  "availability" : [
    "iOS: 13.0.0 -",
    "iPadOS: 13.0.0 -",
    "macCatalyst: 13.0.0 -",
    "macOS: 10.15.0 -",
    "tvOS: 13.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 6.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/Image/renderingMode(_:)",
  "metadataVersion" : "0.1.0",
  "role" : "Instance Method",
  "symbol" : {
    "kind" : "Instance Method",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI5ImageV13renderingModeyA2C017TemplateRenderingE0OSgF"
  },
  "title" : "renderingMode(_:)"
}
-->

# renderingMode(_:)

Indicates whether SwiftUI renders an image as-is, or
by using a different mode.

```
func renderingMode(_ renderingMode: Image.TemplateRenderingMode?) -> Image
```

## Parameters

`renderingMode`

The mode SwiftUI uses to render images.

## Return Value

A modified [`Image`](/documentation/SwiftUI/Image).

## Discussion

The [`Image.TemplateRenderingMode`](/documentation/SwiftUI/Image/TemplateRenderingMode) enumeration has two cases:
[`Image.TemplateRenderingMode.original`](/documentation/SwiftUI/Image/TemplateRenderingMode/original) and [`Image.TemplateRenderingMode.template`](/documentation/SwiftUI/Image/TemplateRenderingMode/template).
The original mode renders pixels as they appear in the original source
image. Template mode renders all nontransparent pixels as the
foreground color, which you can use for purposes like creating image
masks.

The following example shows both rendering modes, as applied to an icon
image of a green circle with darker green border:

```
Image("dot_green")
    .renderingMode(.original)
Image("dot_green")
    .renderingMode(.template)
```

![Two identically-sized circle images. The circle on top is green](images/com.apple.SwiftUI/SwiftUI-Image-TemplateRenderingMode-dots@2x.png)

You also use `renderingMode` to produce multicolored system graphics
from the SF Symbols set. Use the [`Image.TemplateRenderingMode.original`](/documentation/SwiftUI/Image/TemplateRenderingMode/original)
mode to apply a foreground color to all parts of the symbol except
those that have a distinct color in the graphic. The following
example shows three uses of the `person.crop.circle.badge.plus` symbol
to achieve different effects:

- A default appearance with no foreground color or template rendering
  mode specified. The symbol appears all black in light mode, and all
  white in Dark Mode.
- The multicolor behavior achieved by using `original` template
  rendering mode, along with a blue foreground color. This mode causes the
  graphic to override the foreground color for distinctive parts of the
  image, in this case the plus icon.
- A single-color template behavior achieved by using `template`
  rendering mode with a blue foreground color. This mode applies the
  foreground color to the entire image, regardless of the user’s Appearance preferences.

```swift
HStack {
   Image(systemName: "person.crop.circle.badge.plus")
   Image(systemName: "person.crop.circle.badge.plus")
       .renderingMode(.original)
       .foregroundColor(.blue)
   Image(systemName: "person.crop.circle.badge.plus")
       .renderingMode(.template)
       .foregroundColor(.blue)
}
.font(.largeTitle)
```

![A horizontal layout of three versions of the same symbol: a person](images/com.apple.SwiftUI/SwiftUI-Image-TemplateRenderingMode-sfsymbols@2x.png)

Use the SF Symbols app to find system images that offer the multicolor
feature. Keep in mind that some multicolor symbols use both the
foreground and accent colors.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)