SF Symbol

Element type: Dictionary

The SFSymbol component allows you to display any valid SF Symbol inside your Octory view.
It supports customizable rendering modes, colors, weight, size, and variable symbol values.

Keys

Name	Type	Possible values	Required
Type	String	SFSymbol	Required
Name	String	-	Required
Rendering	String	Monochrome, Hierarchical, Palette, Multicolor
SFColor	Dictionary	-
VariableValue	Number	-
Size	Number	-
SystemFontWeight	String	Bold, Black, Heavy, Light, Medium, Regular, Semibold, Thin, UltraLight
Margins	Dictionary (Margins)	-
Condition PRO	Dictionary (Condition)	-

Detail

Type Required

Type: String
Explanation: Must be set to SFSymbol to declare this component.

Name Required

Type: String
Explanation: The identifier of the SF Symbol to display. This value must correspond to a valid SF Symbol name available on macOS.

Rendering

Type: String
Possible values: Monochrome, Hierarchical, Palette, Multicolor
Default: Monochrome
Explanation: Determines the symbol rendering style.

• Monochrome: Draws the symbol using a single color.
• Hierarchical: Applies hierarchical shading using a base color.
• Palette: Uses up to three user-defined colors from SFColor.
• Multicolor: Uses Apple’s predefined multicolor symbol if supported.

SFColor

Type: Dictionary
Explanation: Defines the color(s) applied to the symbol.

• When using Monochrome, Hierarchical, or Multicolor, only Color1 is applied.
• When using Palette, Color1, Color2, and Color3 are applied to build the palette.
  Each color entry follows the same format as the standard color object (LightMode, DarkMode, AlphaLight, AlphaDark).
  If omitted, the symbol inherits the default system text color.

VariableValue

Type: Number
Default: 1
Explanation: Controls the “completion” or fill level of variable SF Symbols. Supported symbols may represent partial states based on a value between 0 and 1. 1 means fully filled.

Size

Type: Number
Default: 20
Explanation: Sets the rendered size of the SF Symbol in points.

SystemFontWeight

Type: String
Possible values: Bold, Black, Heavy, Light, Medium, Regular, Semibold, Thin, UltraLight
Default: Regular
Explanation: Specifies the weight used when rendering the symbol, affecting its visual stroke thickness.

Margins

Type: Dictionary
Reference: Margins
Explanation: Adds margins around the symbol, following the margin configuration standards.

Condition PRO

Type: Dictionary
Reference: Condition
Explanation: Allows this component to appear conditionally when using Octory Pro.

Example

The following displays an image using an online URL.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>SFSymbol</string>
							<key>Name</key>
							<string>square.and.arrow.up</string>
							<key>Rendering</key>
							<string>Palette</string>
							<key>SFColor</key>
							<dict>
								<key>Color1</key>
								<dict>
									<key>DarkMode</key>
									<string>#E76F51</string>
									<key>LightMode</key>
									<string>#3FA7D6</string>
									<key>AlphaLight</key>
									<integer>1</integer>
									<key>AlphaDark</key>
									<integer>1</integer>
								</dict>
								<key>Color2</key>
								<dict>
									<key>AlphaLight</key>
									<integer>1</integer>
									<key>AlphaDark</key>
									<integer>1</integer>
									<key>DarkMode</key>
									<string>#6A4C93</string>
									<key>LightMode</key>
									<string>#F4A261</string>
								</dict>
							</dict>
							<key>Size</key>
							<integer>100</integer>
							<key>SystemFontWeight</key>
							<string>Regular</string>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>