Google icons

Google Icons Skill

This skill provides tools to search and download Material Symbols icons from Google Fonts for Android, web, and Apple development. Icons can be downloaded as Android Vector Drawable XML, SVG, or Android Compose Kotlin.

Overview

Material Symbols are Google's modern icon set, available in three styles:

• Outlined (default): Thin strokes, minimalist design
• Rounded: Soft, rounded corners
• Sharp: Angular, precise edges

Supported download formats:

• Android XML: Android Vector Drawable XML, ready to use in res/drawable
• SVG: Standard SVG asset, including custom Fill, Weight, and Grade variants
• Android Compose: Kotlin ImageVector source file
• Apple: Google symbol SVG export using the _symbol.svg URL pattern

Supported variable font axes:

• Fill: 0 for outlined, 1 for filled
• Weight: Discrete values 100, 200, 300, 400, 500, 600, 700
• Grade: Discrete values -25, 0, 200

The script works on Linux, macOS, and Windows.

Quick Start

Search for Icons

python3 scripts/download_icon.py --search home

Download an Icon

python3 scripts/download_icon.py --name home --output app/src/main/res/drawable/ic_home.xml

Download a Compose Icon

python3 scripts/download_icon.py --name toggle_on --style sharp --format compose --fill 1 --weight 700 --grade 200 --output ToggleOn.kt

Download an Apple SVG

python3 scripts/download_icon.py --name toggle_on --style outlined --format apple --fill 1 --grade 200 --output toggle_on_symbol.svg

Download a Variant SVG

python3 scripts/download_icon.py --name toggle_on --style sharp --format svg --fill 1 --weight 700 --grade 200 --output toggle_on.svg

Script Parameters

Parameter	Short	Description	Default
--search	-q	Search icons by name (lists matching icons)	-
--name	-n	Icon name to download	-
--style	-s	Icon style: outlined, rounded, sharp	outlined
--size	-sz	Size in px: 18, 20, 24, 36, 48	24
--format	-f	Output format: xml, svg, compose, apple	xml
--fill	-	Fill axis: 0 or 1	0
--weight	-	Weight axis choices: 100, 200, 300, 400, 500, 600, 700	400
--grade	-	Grade axis choices: -25, 0, 200	0
--output	-o	Output file path (default: ic_<name>.<ext>)	./ic_<name>.<ext>
--refresh	-	Force refresh metadata cache	False

Usage Examples

Search Icons

# Find icons containing "home"
python3 scripts/download_icon.py --search home

# Find icons containing "settings"
python3 scripts/download_icon.py --search settings

Download Icons

# Basic download (outlined, 24px) - produces XML
python3 scripts/download_icon.py --name home --output app/src/main/res/drawable/ic_home.xml

# Rounded style
python3 scripts/download_icon.py --name settings --style rounded --output app/src/main/res/drawable/ic_settings.xml

# Sharp style with custom size
python3 scripts/download_icon.py --name delete --style sharp --size 48 --output app/src/main/res/drawable/ic_delete_48.xml

# Filled heavy XML variant
python3 scripts/download_icon.py --name toggle_on --style sharp --fill 1 --weight 700 --grade 200 --output app/src/main/res/drawable/ic_toggle_on_filled.xml

# Filled heavy SVG variant
python3 scripts/download_icon.py --name toggle_on --style sharp --format svg --fill 1 --weight 700 --grade 200 --output assets/toggle_on.svg

# Android Compose Kotlin source
python3 scripts/download_icon.py --name toggle_on --style sharp --format compose --fill 1 --weight 700 --grade 200 --output app/src/main/java/icons/ToggleOn.kt

# Apple symbol SVG
python3 scripts/download_icon.py --name toggle_on --style outlined --format apple --fill 1 --grade 200 --output Assets/toggle_on_symbol.svg

Using Downloaded Icons in Android

Icons downloaded with --format xml are ready to use immediately as Android Vector Drawables:

// In Compose
import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource

@Composable
fun HomeIcon() {
    Image(
        painter = painterResource(id = R.drawable.ic_home),
        contentDescription = "Home"
    )
}

// Or using Icon component
import androidx.compose.material3.Icon

Icon(
    painter = painterResource(id = R.drawable.ic_home),
    contentDescription = "Home"
)

<!-- In XML layout -->
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_home" />

Available Sizes

Material Symbols are optimized for these sizes:

• 18px: Small inline icons
• 20px: Standard mobile icons
• 24px: Default material icon size
• 36px: Medium display icons
• 48px: Large display icons

Icon Naming Convention

When downloading icons:

• Use ic_ prefix for icon files (e.g., ic_home.xml)
• Consider adding style suffix for non-default styles (e.g., ic_home_rounded.xml)
• Consider adding size suffix for non-standard sizes (e.g., ic_home_48.xml)
• Compose files are usually better with PascalCase filenames (e.g., Home.kt)
• Apple SVG assets can keep the icon name directly (e.g., toggle_on.svg)

Notes

• The script caches metadata in a user-specific system temporary directory (google-fonts-<username>) to avoid permission conflicts on multi-user systems.
• Metadata is fetched from https://fonts.google.com/metadata/icons
• XML icons use the default Google asset URL for default axes and switch to the Google variant path .../{icon}/{variant}/{size}px.xml for custom fill, weight, or grade
• SVG icons use the default Google asset URL for default axes and switch to the Google variant path .../{icon}/{variant}/{size}px.svg for custom fill, weight, or grade
• Compose icons are downloaded from https://fonts.gstatic.com/render/v1/Material+Symbols+{Style}/{size}dp/{icon}.kt?...
• Apple symbol SVGs are downloaded from https://fonts.gstatic.com/s/i/short-term/release/{style}/{icon}/{variant}/{icon}_{variant}_symbol.svg
• The Apple _symbol.svg response is a Google symbol sheet, not the same single-icon asset returned by --format svg
• The script uses only Python standard library modules and is portable across Linux, macOS, and Windows

URL Pattern

Icons are downloaded using these patterns:

https://fonts.gstatic.com/s/i/short-term/release/{style_folder}/{icon_name}/default/{size}px.xml
https://fonts.gstatic.com/s/i/short-term/release/{style_folder}/{icon_name}/{variant_segments}/{size}px.xml
https://fonts.gstatic.com/s/i/short-term/release/{style_folder}/{icon_name}/default/{size}px.svg
https://fonts.gstatic.com/s/i/short-term/release/{style_folder}/{icon_name}/{variant_segments}/{size}px.svg
https://fonts.gstatic.com/render/v1/{compose_family}/{size}dp/{icon_name}.kt?var=opsz,wght,FILL,GRAD,ROND@{size},400,0,0,50
https://fonts.gstatic.com/s/i/short-term/release/{style_folder}/{icon_name}/{variant_folder_or_default}/{icon_name}{suffix}_symbol.svg

Where style_folder is one of:

• materialsymbolsoutlined (for outlined style)
• materialsymbolsrounded (for rounded style)
• materialsymbolssharp (for sharp style)

And compose_family is one of:

• Material+Symbols+Outlined
• Material+Symbols+Rounded
• Material+Symbols+Sharp

For XML and SVG variant folders:

• only non-default axis segments are included
• negative grades are encoded with N, for example gradN25
• examples: fill1, wght700, grad200, wght700grad200fill1

For Apple symbol SVGs:

• the folder name is default for default axes, otherwise it uses the same variant segment naming
• the file name repeats the icon name, followed by _{variant} if custom axes are used, and ends with _symbol.svg (e.g. toggle_on_symbol.svg or toggle_on_grad200fill1_symbol.svg)