Using Shapes, Images, and Custom Icons in Tableau

Topic: Using Shapes, Images, and Custom Icons

Learning Objective: Understand how to use built-in shapes, custom shapes, images, and icons in Tableau to improve data visualization, communicate information visually, highlight categories, and create professional interactive dashboards.

1. Introduction to Shapes, Images, and Custom Icons

Tableau provides several ways to represent information visually beyond bars, lines, and text. Shapes, images, and custom icons can help users identify categories, recognize important business metrics, and understand complex information more quickly.

These visual elements can be used in scatter plots, maps, dashboards, KPI reports, category comparisons, and other analytical views. Tableau supports built-in shape palettes and custom shape files that can be added through the Tableau Repository.

• Shapes: Geometric symbols such as circles, squares, triangles, and arrows used to distinguish data points.
• Images: Visual assets such as logos, product pictures, maps, and background images.
• Custom Icons: Specialized symbols created or selected to represent categories, statuses, departments, or business metrics.

Example

Consider a sales dashboard containing information about different product categories.

• A laptop icon represents electronics.
• A clothing icon represents apparel.
• A furniture icon represents furniture products.
• A warning icon highlights a category that requires attention.

These symbols can make the dashboard more intuitive, provided that the icons are clear and their meanings are consistent.

2. Importance of Using Shapes, Images, and Icons

• Improve visual communication: Symbols can communicate concepts quickly.
• Distinguish categories: Different shapes can represent different groups.
• Highlight important information: Icons can draw attention to selected KPIs or exceptions.
• Improve dashboard appearance: Carefully selected visual elements can create a polished design.
• Support data interpretation: Recognizable symbols can make complex information easier to understand.
• Strengthen branding: Logos and consistent icon styles can align dashboards with an organization's visual identity.
• Improve interaction: Shape-based views can help users select and explore data marks.

3. Understanding Shapes in Tableau

Shapes are visual marks used to represent individual data points or categories. Tableau includes several built-in shape palettes, and users can assign different shapes to members of a dimension.

Shapes are particularly useful in scatter plots, where color alone may not be sufficient to distinguish groups.

Common Shapes

The meanings in this table are examples. Choose meanings that match your data and explain them clearly to users.

4. Understanding the Marks Card

The Marks card controls the appearance of data marks in a Tableau worksheet. It allows users to configure mark type, color, size, shape, detail, label, and tooltip.

Important Marks Card Options

5. Creating a Shape-Based Visualization

You can create a shape-based visualization by selecting the Shape mark type and assigning a field to the Shape property.

Steps to Create a Shape Chart

1. Open Tableau Desktop and connect to a dataset.
2. Drag a measure such as Sales to Columns.
3. Drag another measure such as Profit to Rows.
4. On the Marks card, select Shape from the mark-type drop-down menu.
5. Drag a dimension such as Category or Segment to Shape.
6. Optionally, drag the same or another dimension to Color to provide another visual distinction.
7. Click Shape to choose or edit the assigned symbols.
8. Adjust mark size and add labels or tooltips when useful.

Example

A scatter plot compares sales and profit for several product categories. Different shapes represent categories, while color represents performance. This allows users to compare two measures and distinguish groups in the same view.

6. Assigning Shapes to Categories

Tableau can assign a different shape to each member of a dimension. This is called shape encoding.

Steps to Assign Shapes

1. Create a visualization that contains the categories you want to distinguish.
2. Drag the relevant dimension, such as Segment, to Shape on the Marks card.
3. Click Shape on the Marks card or open the shape legend menu.
4. Select Edit Shape.
5. Choose the desired shape palette.
6. Select a data member from the list.
7. Assign a shape to that member, or use Assign Palette where available.
8. Click OK and review the chart.

Tableau's default shape assignments can repeat when a dimension has more members than the available unique shapes. For categories that must remain distinct, use a suitable palette and check the assignments carefully.

7. Customizing Built-In Shapes

Tableau includes built-in shape palettes that can be selected without importing external files. You can change these assignments to suit the visualization.

Steps to Customize Built-In Shapes

1. Open the worksheet containing the shape-based visualization.
2. Click Shape on the Marks card.
3. Select Edit Shape if needed.
4. Choose a built-in shape palette from the available list.
5. Select a data member and assign the appropriate shape.
6. Use Assign Palette when automatic assignment is suitable.
7. Click OK and confirm that the shapes are easy to distinguish.

When to Use Built-In Shapes

• When the available symbols meet your visualization needs.
• When you want to avoid managing external image files.
• When a simple, consistent design is more effective than custom graphics.
• When creating charts that must remain easy to maintain.

8. Understanding Custom Shapes

Custom shapes are image files that you add to Tableau's shape repository and use as marks in a visualization. They allow you to replace standard symbols with specialized graphics, such as product icons, transport symbols, department icons, or other meaningful visuals.

Custom shapes are particularly useful when built-in symbols cannot communicate the categories clearly enough.

Examples of Custom Shapes

• Product category symbols in a retail dashboard.
• Vehicle symbols in a logistics report.
• Department symbols in an organizational dashboard.
• Weather symbols in a suitable weather analysis.
• Custom markers in a geographic or location-based visualization.
• Business status symbols in a performance report.

9. Preparing Custom Shape Files

Before importing custom shapes, prepare image files that are clear, consistent, and suitable for use as data marks.

Recommended Guidelines

• Use suitable formats: Tableau documentation supports formats such as PNG, GIF, JPG, BMP, and TIFF for custom shapes.
• Prefer transparent backgrounds: PNG files with transparency are useful when only the symbol should appear.
• Use consistent dimensions: Shapes should have similar proportions so that categories appear balanced.
• Keep symbols recognizable: Avoid complicated images with excessive detail.
• Use appropriate resolution: Images should remain clear at the intended mark size.
• Use meaningful names: Name files according to the symbols they represent.
• Respect licensing: Use images and icons you are authorized to use.

Tableau's documentation suggests that approximately 32 × 32 pixels can be a useful starting size for many custom shapes. The ideal size depends on the design and how large the marks will appear.

10. Adding Custom Shapes to Tableau

In Tableau Desktop, custom shapes are loaded from folders inside the Shapes directory of the My Tableau Repository.

Steps to Add Custom Shapes

1. Prepare the image files you want to use.
2. Open the Documents folder on your computer.
3. Locate My Tableau Repository.
4. Open the Shapes folder.
5. Create a new subfolder with a descriptive name, such as Business Icons.
6. Copy your image files into that subfolder.
7. Return to Tableau and open the worksheet using shapes.
8. Click Shape on the Marks card.
9. Select Edit Shape.
10. Choose your new palette from the palette drop-down menu.
11. Click Reload Shapes if the new files are not visible.
12. Assign the custom shapes to the required data members and click OK.

Example folder structure:

Documents/
└── My Tableau Repository/
    └── Shapes/
        └── Business Icons/
            ├── Electronics.png
            ├── Clothing.png
            ├── Furniture.png
            └── Other.png

The folder name becomes the palette name shown in Tableau. The filenames help you identify the individual images when assigning shapes.

11. Reloading and Assigning Custom Shapes

If you add new files or modify existing shape images while Tableau is open, the changes may not appear immediately. Reload the shapes palette to refresh the available images.

Steps to Reload Custom Shapes

1. Open the worksheet containing the shape visualization.
2. Click Shape on the Marks card.
3. Select Edit Shape.
4. Click Reload Shapes in the dialog box.
5. Select the custom palette from the drop-down list.
6. Assign shapes to the relevant dimension members.
7. Click OK and review the view.

Tip: If a shape is missing, verify the folder location, file format, filename, and palette selection before rebuilding the visualization.

12. Changing the Size and Color of Shapes

Shape size and color can improve visibility and provide additional information. However, these properties should be used consistently so that users can understand their meaning.

Adjusting Shape Size

1. Select the Shape mark type.
2. Click Size on the Marks card.
3. Move the slider to increase or decrease the mark size.
4. Check that the marks remain readable and do not overlap excessively.

Changing Shape Colors

1. Open the Marks card and click Color.
2. Choose a color for all marks, or place a field on Color to encode categories or values.
3. Review the contrast between the symbol and the background.
4. Check that the colors remain distinguishable when displayed with the chosen shapes.

Important: Some custom images contain their own colors. The way Tableau's Color encoding affects them depends on the image and its transparency. Transparent PNG shapes are often useful when you want the underlying symbol to remain visible without coloring an entire square image background.

13. Understanding Images in Tableau

Images can provide context or visual identity in Tableau workbooks. Their use differs from custom shapes: custom shapes generally represent data marks, while images can also be placed as dashboard objects or used as backgrounds.

Common Uses of Images

14. Adding Images to a Tableau Dashboard

Tableau dashboards can include image objects, which are useful for adding logos, explanatory graphics, or other static visual assets.

Steps to Add an Image Object

1. Open the dashboard in Tableau Desktop.
2. Locate the Objects area in the Dashboard pane.
3. Drag the Image object onto the dashboard.
4. Select the image file when prompted.
5. Configure the available sizing and layout options.
6. Position the image appropriately in the dashboard.
7. Review the result at the intended dashboard size.

Practical Example

Add a company logo to the top-left area of a sales dashboard. Place the main title beside it and keep the logo small enough that it does not distract from the charts.

15. Understanding Background Images

A background image is displayed beneath the data in a Tableau view. Background images are useful when a dataset contains coordinates that correspond to a particular image, such as a building floor plan, custom map, or other spatial diagram.

Unlike a dashboard image object, a background image is connected to coordinate values so that marks can be positioned over the image.

Examples of Background Images

• Office floor plans showing employee or equipment locations.
• Warehouse layouts showing inventory or operational activity.
• Custom maps for locations not covered by standard map layers.
• Game or process layouts with defined X and Y coordinates.
• Technical diagrams linked to measured positions.

16. Adding a Background Image to a View

Background images in Tableau Desktop require a coordinate system that maps the image to fields in the data source.

General Steps

1. Prepare an image and the data fields that identify positions on the image.
2. Open the worksheet in Tableau Desktop.
3. Select the relevant background image option from the Map menu when supported by the view.
4. Choose the image file.
5. Map the appropriate data field to the X-axis and another field to the Y-axis.
6. Configure the image's coordinate ranges and display options.
7. Maintain the aspect ratio if distortion would affect interpretation.
8. Place the X field on Columns and the Y field on Rows.
9. Review the marks to ensure that their positions align with the image.

Important: The exact menu options depend on the Tableau version and the type of view. If the image does not appear, check the coordinate mappings, axis configuration, aggregation settings, and background map settings.

17. Difference Between Custom Shapes and Dashboard Images

18. Using Custom Icons for KPI Dashboards

Custom icons can make KPI dashboards easier to scan by associating recognizable symbols with key performance indicators.

Example KPI Icons

These are illustrative meanings. Use a legend, label, or nearby text if the icons could be interpreted in more than one way.

Steps to Use Custom Icons in a KPI View

1. Prepare or select a consistent set of icon images.
2. Add the icons to the Tableau shape repository if they will be used as custom shapes.
3. Create a worksheet for the KPI or category.
4. Select Shape on the Marks card.
5. Assign the relevant icon to each category.
6. Adjust the size and color as appropriate.
7. Add the KPI value through Label or Text.
8. Use a tooltip to provide supporting details.
9. Arrange the worksheet or worksheets into a dashboard.

19. Using Shapes and Icons as Dashboard Filters

Custom shapes can also be used in interactive dashboard designs. For example, a row of category icons can help users select the category they want to investigate.

The icons themselves do not automatically filter every worksheet. To create an interactive filter, configure the relevant worksheet and dashboard actions or filter behavior.

General Workflow

1. Create a worksheet containing the categories you want users to select.
2. Use a shape or custom icon to represent each category.
3. Place the category field on the Marks card so each icon represents the correct data member.
4. Add the worksheet to a dashboard.
5. Enable Use as Filter if the worksheet's default filter behavior is appropriate, or configure a dashboard filter action.
6. Set the target worksheets that should respond to the selection.
7. Test the interaction by selecting different icons.
8. Ensure users can clear or reset selections as needed.

Example

A product dashboard displays icons for Electronics, Clothing, and Furniture. Selecting the Electronics icon filters the connected charts to display electronics-related sales and profit.

20. Using Images and Icons in Maps

Custom shapes can represent different types of locations or events on a map-like visualization. For example, icons may identify warehouses, stores, service centers, or other location categories.

Steps to Use Shapes on a Map

1. Connect a dataset containing geographic fields.
2. Create a map using the appropriate location fields.
3. Place a category field on Shape on the Marks card.
4. Assign the appropriate built-in or custom shape to each category.
5. Use Color to distinguish additional groups when necessary.
6. Add tooltips containing the location name and relevant measures.
7. Check that icons remain readable and do not overlap excessively.

Best Practice: Keep map symbols simple. Too many different shapes can make the map difficult to interpret, especially when many locations are close together.

21. Best Practices for Using Shapes, Images, and Icons

• Use visuals with a purpose: Every shape or image should improve understanding.
• Prefer simplicity: Avoid overly detailed icons that become unclear at small sizes.
• Be consistent: Use a consistent visual style across the dashboard.
• Limit categories: Too many unique shapes can be difficult to distinguish.
• Combine encodings carefully: Color, shape, and size should each communicate a clear and useful dimension of information.
• Maintain contrast: Make symbols visible against the background.
• Use transparent files where useful: Transparent PNG icons can avoid unwanted square backgrounds.
• Keep file dimensions reasonable: Avoid oversized image files when smaller assets are sufficient.
• Test at the actual display size: A detailed icon may look good when enlarged but become unclear in a dashboard.
• Provide context: Use labels or legends to explain unfamiliar symbols.
• Consider accessibility: Do not rely on color alone to communicate important differences.
• Respect image permissions: Use assets that are licensed or approved for your intended use.

22. Common Problems and Solutions

23. Practical Project: Interactive Product Performance Dashboard

Project Objective: Build a dashboard that uses custom shapes, icons, and images to make product performance easy to explore.

Sample Dataset Fields

Project Steps

1. Connect the product sales dataset to Tableau.
2. Prepare icons for the main product categories.
3. Add the icon files to the Tableau Repository Shapes folder.
4. Create a worksheet displaying product categories using custom shapes.
5. Assign a suitable shape to each category.
6. Create a bar chart comparing sales by category.
7. Create a scatter plot comparing sales and profit.
8. Add category, sales, and profit details to the tooltips.
9. Build a dashboard and add a company logo using an image object if appropriate.
10. Configure the category icon worksheet to filter the related views.
11. Use consistent colors, spacing, and icon sizes.
12. Test all interactions and verify that the icons represent the correct categories.

Expected Result

The dashboard should provide an interactive overview of product performance. Users should be able to identify categories quickly, explore sales and profit, and filter the dashboard by selecting the relevant category icon.

24. Practice Exercises

1. Create a scatter plot using Sales and Profit.
2. Assign different built-in shapes to product categories.
3. Change the shape palette and compare the results.
4. Prepare a folder containing at least three custom icons.
5. Load the custom icons into Tableau.
6. Assign custom shapes to a category dimension.
7. Change mark size and evaluate readability.
8. Add a logo to a dashboard using an Image object.
9. Explore how background images can be aligned with coordinate data.
10. Create an icon-based category selector and configure it to filter dashboard views.
11. Customize tooltips to provide more context for icon-based marks.
12. Review the dashboard for clutter, accessibility, and consistent visual design.

25. Interview Questions and Answers

Q1. What are shapes in Tableau?

Answer: Shapes are visual marks used to represent data points or distinguish categories. They can be assigned through the Shape property on the Marks card.

Q2. What is the Marks card?

Answer: The Marks card controls the appearance of marks through properties such as Color, Size, Shape, Detail, Label, and Tooltip.

Q3. What is shape encoding?

Answer: Shape encoding assigns different symbols to data members so that users can distinguish categories visually.

Q4. How do you create a shape-based chart?

Answer: Select the Shape mark type and drag a dimension to Shape on the Marks card. Assign appropriate shapes to the category members.

Q5. What are custom shapes in Tableau?

Answer: Custom shapes are image files added to Tableau's shape repository and used as marks in a visualization.

Q6. Where do you store custom shape files?

Answer: In a subfolder inside the Shapes directory of the My Tableau Repository folder, commonly located in the user's Documents directory.

Q7. How do you load custom shapes?

Answer: Copy the files into a subfolder of the Shapes directory, open Edit Shape, choose the custom palette, and use Reload Shapes if needed.

Q8. What image formats can be used for custom shapes?

Answer: Tableau documentation supports formats including PNG, GIF, JPG, BMP, and TIFF.

Q9. Why are transparent PNG images useful?

Answer: They can display a symbol without a solid square background, which is useful when shapes are color-encoded.

Q10. What is the difference between a custom shape and a dashboard image?

Answer: A custom shape represents a data mark, while a dashboard image is a static visual object placed in the dashboard layout.

Q11. What is a background image?

Answer: A background image appears behind data marks and is mapped to coordinates, making it useful for floor plans, custom maps, and spatial diagrams.

Q12. How can icons be used in KPI dashboards?

Answer: Icons can visually identify metrics such as sales, customers, growth, or target achievement. Their meaning should be clear and consistent.

Q13. Can custom shapes be used as dashboard filters?

Answer: Yes. A worksheet displaying category shapes can be configured with Use as Filter or a dashboard filter action to filter connected views.

Q14. Why should you avoid too many shapes?

Answer: Too many unique symbols can overwhelm users and make it difficult to distinguish categories accurately.

Q15. What should you check when custom shapes are missing?

Answer: Check the repository path, folder structure, image file formats, palette selection, and whether Reload Shapes is needed.

26. Quick Revision Checklist

• Understand the purpose of shapes, images, and custom icons.
• Know the role of the Marks card.
• Use Shape to distinguish categories.
• Customize built-in shape palettes.
• Prepare and organize custom shape files.
• Load shapes from the My Tableau Repository Shapes folder.
• Use Reload Shapes when required.
• Adjust shape size and color carefully.
• Add dashboard images such as logos.
• Understand background images and coordinate mapping.
• Configure icon-based dashboard filters where useful.
• Maintain consistent, accessible visual design.
• Check image quality, transparency, licensing, and readability.
• Test the final dashboard at its intended size.

27. Official Tableau Learning Resources

• Tableau Documentation: Control the Appearance of Marks
• Tableau Documentation: Change the Type of Mark in the View
• Tableau Documentation: Use Background Images in Your Views
• Tableau Learning: Custom Shapes
• Tableau: Using Custom Shapes as Dashboard Filters

28. Tableau Training and Course Demo

Explore Tableau training to develop practical skills in data visualization, custom shape design, dashboard formatting, and interactive reporting.

Explore Tableau Training

Register for a Tableau Course Demo

29. Conclusion

Using shapes, images, and custom icons in Tableau helps transform ordinary charts into more intuitive and visually engaging analytical reports. Built-in shapes are useful for distinguishing data categories, custom shapes allow specialized symbols to be used as marks, and dashboard or background images provide additional visual context.

For effective results, choose symbols that have a clear purpose, use consistent styles, maintain good contrast, and avoid unnecessary decoration. When these visual elements are combined with meaningful labels, tooltips, and dashboard actions, they can improve both data interpretation and the overall user experience.