<!--
{
  "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/SymbolRenderingMode/hierarchical",
  "metadataVersion" : "0.1.0",
  "role" : "Type Property",
  "symbol" : {
    "kind" : "Type Property",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI19SymbolRenderingModeV12hierarchicalACvpZ"
  },
  "title" : "hierarchical"
}
-->

# hierarchical

A mode that renders symbols as multiple layers, with different opacities
applied to the foreground style.

```
static let hierarchical: SymbolRenderingMode
```

## Discussion

SwiftUI fills the first layer with the foreground style, and the others
the secondary, and tertiary variants of the foreground style. You can
specify these styles explicitly using the [`foregroundStyle(_:_:)`](/documentation/SwiftUI/View/foregroundStyle(_:_:))
and [`foregroundStyle(_:_:_:)`](/documentation/SwiftUI/View/foregroundStyle(_:_:_:)) modifiers. If you only specify
a primary foreground style, SwiftUI automatically derives
the others from that style. For example, you can render a filled
exclamation mark triangle with purple as the tint color for the
exclamation mark, and lower opacity purple for the triangle:

```
Image(systemName: "exclamationmark.triangle.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(Color.purple)
```

---

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)