Import HMI symbols into Siemens WinCC Unified
WinCC Unified prefers scalable vector (SVG) assets — they render crisply on any panel size and stay light in memory. The Symbol Builder exports clean SVG (no scripts, no external fonts, literal hex colours), and every community symbol page offers the same SVG download — both go straight into TIA Portal's external graphics library.
Step-by-step
Export your symbols as SVG
- Draw it: in the Symbol Builder, compose the equipment from shapes, ISA elements and stamps, then click
↓ SVG(or Copy SVG if you want to paste the markup somewhere). Use a 512 × 512 canvas for square equipment, 256 × 128 for the wide motor-and-label footprint. - Reuse it: open a symbol from community motors, valves, pumps or tanks and click Download SVG. CC BY 4.0 — credit the author in your project documentation. Open in builder lets you adapt it first.
- Badges and icons: alarm priority badges, state badges, arrows and navigation / system-bar icons come from the icon library as SVG too.
You need one file per state. Build the base symbol, Save it as a template, recolor the body fill for each state (gray stopped, white or green running, yellow no-feedback, blue manual, dark gray disabled), stamp the P1 / P2 badge for the alarm variants, and export each one as {kind}_{state}.svg — e.g. motor_3ph_running.svg. Keep the body without the tag text; the faceplate adds it (step 6).
Composing in the Builder needs no account. Downloading does: a free account gives 5 downloads a month, Starter 50, Studio unlimited. Symbols you publish yourself are always free to download.
Open your TIA Portal project
In Portal view, switch to Project view. Expand your HMI device → HMI graphics → External graphics.
Add external graphics
Right-click External graphics → Add new external graphic. Browse to your motor/ folder, multi-select all SVGs and click Open. Repeat for each equipment kind.
Alternative: drag-drop the SVG files directly from the file explorer onto the External graphics node — TIA Portal V18+ accepts batch drops.
Create a Graphic List for state switching
To switch images by PLC value, build a Graphic List:
- HMI device → Lists → Graphic lists → Add new graphic list. Name it after the equipment kind (e.g.
GL_Motor3ph). - Select Graphic list type: Value/Range.
- Add 9 entries (0..8) and assign each one to the matching SVG you imported: 0 stopped, 1 starting, 2 running, 3 no feedback, 4 manual, 5 disabled, 6 running + P1, 7 running + P2, 8 fault.
Place a Graphic IO Field on a screen
Toolbox → Elements → Graphic IO Field. Drop on the screen.
In the inspector window:
- General → Graphic list: choose
GL_Motor3ph. - General → Process tag: bind to your PLC state INT (one word per equipment, encoded 0-8).
- General → Mode: Output (read-only).
(Optional) Wrap as a Custom Faceplate
For projects with many of the same equipment, create a Faceplate in WinCC Unified:
- Library → Add new faceplate. Name
FP_Motor3ph. - Inside, place the Graphic IO Field bound to a faceplate-internal tag
State. - Add a Text Field bound to
Tagfor the equipment label (P-101, M-201...). - Drop the faceplate on screens; bind
StateandTagto the actual PLC tags per instance.
Recommended PLC encoding (S7)
Use a single INT word per equipment in your data block, encoded 0-8:
Comfort Panel fallback (Classic WinCC)
If you target Comfort Panels (KP/TP series) running Classic WinCC instead of WinCC Unified, SVG isn't natively supported. You have two options:
- PNG instead of SVG: export the same symbols as transparent PNG (Builder: BG → Transparent,
↓ PNG; community pages: Download PNG) and import via Toolbox → Graphics → Bitmap. Bind through a Graphics List the same way. The PNG is rendered at 2× the canvas or more, so it downsizes cleanly. - SVG re-rasterized: TIA Portal converts imported SVGs to internal vectors; on Comfort Panels they render at fixed PPI. Test on the target device — text legibility differs from Unified Panels.
Recommended panel sizes
| Panel | Recommended graphic size | Format |
|---|---|---|
| MTP1500 / MTP1900 Unified | 320×160 | SVG |
| MTP700 / MTP1000 Unified | 256×128 | SVG |
| TP700 / TP900 Comfort | 192×96 to 256×128 | PNG (transparent) |
| TP1500 / TP1900 Comfort | 256×128 to 320×160 | PNG (transparent) |
Common pitfalls
- SVG text doesn't render: WinCC Unified rasterizes SVG fonts at compile time. Builder exports write text with the Inter font family, which TIA Portal may not have — keep tag text out of the SVG and overlay a Text Field (step 6) instead. Instrument bubbles with letters inside are fine at 256 px and up; test them on the target panel.
- Graphic List entries collapse to "default": ensure each value (0-8) has a distinct graphic. Empty entries fall back to entry 0.
- Colours drifting between states: when you recolor variants by hand, keep the palette:
#9E9E9Estopped,#2E7D32running,#FBC02Dno feedback,#1976D2manual,#616161disabled,#D32F2FP1,#F57C00P2. The Builder's fill swatches are exactly these. - Slow screen load: for screens with 30+ equipment, prefer Faceplates with shared graphic lists rather than 30 individual Graphic IO Fields.
What's next
- Why these 9 states are the right encoding
- ISA-101 reference — the design philosophy behind the calm palette
- Want the badges and indicators closer to the TIA default look? The icon library sidebar has a Siemens style preset that recolors them to house colours before download. In the Builder you choose the fills yourself.
- Stuck on a TIA version quirk? Ask in the forum — WinCC questions go in the vendor-tooling category.
Build the symbol, then bind it
The Symbol Builder needs no account to compose. A free account gives you 5 downloads a month; publish your own symbols under CC BY 4.0 and download them free. Or start from what other engineers already drew.