Turbo Social Icons

Store Design
, , ,

Topic summary

A user is attempting to add a Substack icon to the Turbo theme but encounters issues with scaling, alignment, and hover color changes. The icon doesn’t behave consistently with existing social icons.

Identified Problem:

  • Manual addition works but lacks proper styling integration
  • Suspected issue lies in correctly modifying the turbo.svg file
  • Changes to social-icons.liquid and style.css.liquid appear straightforward
  • SVG source is from Bootstrap Icons

Proposed Solution:

  • Add Substack SVG code to theme files in the same format as existing icons
  • Insert a new {% when 'substack' %} case block in the liquid template
  • Modify the turbo.svg file if necessary
  • Add CSS styling for default appearance (24px dimensions, black fill) and hover state (Substack orange #FF6719)
  • Configure theme settings to include Substack if required

Status: Solution provided but not yet confirmed as implemented or tested.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hoping someone can help. I am trying to add the substack icon to the turbo theme.

I can manually add it but then it does not scale, align properly or change colour on rollover as per the other social icons. I am assuming my issue is in correctly modifying the turbo.svg file as the changes to social-icons.liquid and style.css.liquid seem pretty straightforward.

Hoping someone can help. The svg info I have from bootstrap is from Substack · Bootstrap Icons

2

Hi,

Hope this will help

  • Add Substack SVG to Your Theme Files
  • Add new Substack icon in the same format
{% when 'substack' %}
  
{% endcase %}
  • If required Modify the turbo.svg File
  • Add css for style
    CSS code example
.social-icons .substack svg {
    width: 24px;
    height: 24px;
    fill: #000; /* Default color */
    transition: fill 0.3s ease;
}

.social-icons .substack:hover svg {
    fill: #FF6719; /* Substack orange */
}

If required then add substack to theme setting