<!--
{
  "availability" : [
    "iOS: 15.0.0 -",
    "iPadOS: 15.0.0 -",
    "macCatalyst: 15.0.0 -",
    "macOS: 12.0.0 -",
    "tvOS: 15.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 8.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/View/symbolVariant(_:)",
  "metadataVersion" : "0.1.0",
  "role" : "Instance Method",
  "symbol" : {
    "kind" : "Instance Method",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI4ViewPAAE13symbolVariantyQrAA14SymbolVariantsVF"
  },
  "title" : "symbolVariant(_:)"
}
-->

# symbolVariant(_:)

Makes symbols within the view show a particular variant.

```
nonisolated func symbolVariant(_ variant: SymbolVariants) -> some View
```

## Parameters

`variant`

The variant to use for symbols. Use the values in
[`SymbolVariants`](/documentation/SwiftUI/SymbolVariants).

## Return Value

A view that applies the specified symbol variant or variants
to itself and its child views.

## Discussion

When you want all the
<doc://com.apple.documentation/design/Human-Interface-Guidelines/sf-symbols>
in a part of your app’s user interface to use the same variant, use the
`symbolVariant(_:)` modifier with a [`SymbolVariants`](/documentation/SwiftUI/SymbolVariants) value, like
[`fill`](/documentation/SwiftUI/SymbolVariants/fill-swift.type.property):

```
VStack(spacing: 20) {
    HStack(spacing: 20) {
        Image(systemName: "person")
        Image(systemName: "folder")
        Image(systemName: "gearshape")
        Image(systemName: "list.bullet")
    }

    HStack(spacing: 20) {
        Image(systemName: "person")
        Image(systemName: "folder")
        Image(systemName: "gearshape")
        Image(systemName: "list.bullet")
    }
    .symbolVariant(.fill) // Shows filled variants, when available.
}
```

A symbol that doesn’t have the specified variant remains unaffected.
In the example above, the `list.bullet` symbol doesn’t have a filled
variant, so the `symbolVariant(_:)` modifer has no effect.

![A screenshot showing two rows of four symbols. Both rows contain a](images/com.apple.SwiftUI/View-symbolVariant-1@2x.png)

If you apply the modifier more than once, its effects accumulate.
Alternatively, you can apply multiple variants in one call:

```
Label("Airplane", systemImage: "airplane.circle.fill")

Label("Airplane", systemImage: "airplane")
    .symbolVariant(.circle)
    .symbolVariant(.fill)

Label("Airplane", systemImage: "airplane")
    .symbolVariant(.circle.fill)
```

All of the labels in the code above produce the same output:

![A screenshot of a label that shows an airplane in a filled circle](images/com.apple.SwiftUI/View-symbolVariant-2@2x.png)

You can apply all these variants in any order, but
if you apply more than one shape variant, the one closest to the
symbol takes precedence. For example, the following image uses the
[`square`](/documentation/SwiftUI/SymbolVariants/square-swift.type.property) shape:

```
Image(systemName: "arrow.left")
    .symbolVariant(.square) // This shape takes precedence.
    .symbolVariant(.circle)
    .symbolVariant(.fill)
```

![A screenshot of a left arrow symbol in a filled](images/com.apple.SwiftUI/View-symbolVariant-3@2x.png)

To cause a symbol to ignore the variants currently in the environment,
directly set the [`symbolVariants`](/documentation/SwiftUI/EnvironmentValues/symbolVariants) environment value
to [`none`](/documentation/SwiftUI/SymbolVariants/none) using the [`environment(_:_:)`](/documentation/SwiftUI/View/environment(_:_:)) modifer.

---

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)