# streamlit-select-icons
A Streamlit custom component that creates a selectable grid of labeled icons with flexible layout options.
## Features
- ✅ **Grid-based layout system** (rows/columns)
- ✅ **Multi/single selection modes**
- ✅ **Responsive card sizing**
- ✅ **Per-item custom styling** (colors)
- ✅ **Bold selected labels**
- ✅ **Configurable component dimensions**
- ✅ **Row/column orientations with scrolling**
## Installation
```sh
pip install streamlit-select-icons
```
## Usage
```python
import streamlit as st
from streamlit_select_icons import select_icons
# Define your items
items = {
"home": {
"label": "Home",
"icon": "static/home-icon.png", # Will resolve to /app/static/home-icon.png
"properties": {"category": "navigation"}
},
"search": {
"label": "Search",
"icon": "static/search-icon.png", # Will resolve to /app/static/search-icon.png
"properties": {"category": "action"}
},
"profile": {
"label": "Profile",
"icon": "static/profile-icon.png", # Will resolve to /app/static/profile-icon.png
"properties": {"category": "user"}
},
}
# Create the icon selector
result = select_icons(
items=items,
multi_select=True, # Allow multiple selections
layout="column", # or "row"
columns=2, # Number of columns in grid
width=300, # Component width
height=200, # Component height
size=80, # Individual card size
bold_selected=True, # Bold labels when selected
key="icon_selector"
)
if result:
st.write("Selected items:", result["selected_items"])
st.write("All items:", result["items"])
```
## Static Files
The component automatically resolves icon paths that start with `static/` to Streamlit's `/app/static/` folder. This means:
- `"static/icon.png"` → `/app/static/icon.png`
- `"static/my-icon.svg"` → `/app/static/my-icon.svg`
**Important**: Place your icon images in your Streamlit app's `static/` folder for this to work correctly.
## Parameters
- **items**: Dictionary of items with id keys and item data
- **selected_items**: List of pre-selected item IDs
- **multi_select**: Enable multiple selection (default: True)
- **layout**: "column" or "row" layout orientation
- **columns**: Number of columns (column layout)
- **rows**: Number of rows (row layout)
- **width**: Component container width in pixels
- **height**: Component container height in pixels
- **size**: Individual card size in pixels (default: 96)
- **item_style**: Per-item custom colors and styling
- **bold_selected**: Make selected labels bold (default: False)
- **key**: Unique component key
Raw data
{
"_id": null,
"home_page": null,
"name": "streamlit-select-icons",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.11",
"maintainer_email": null,
"keywords": "streamlit, component, icons, ui, selection",
"author": null,
"author_email": "Andrew Ferguson <afdatatech@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/ab/98/751d2e48f48e3f20bfd9f59162db192dcd59df497185c27deabd6b3e2abc/streamlit_select_icons-0.0.3.tar.gz",
"platform": null,
"description": "# streamlit-select-icons\r\n\r\nA Streamlit custom component that creates a selectable grid of labeled icons with flexible layout options.\r\n\r\n## Features\r\n\r\n- \u2705 **Grid-based layout system** (rows/columns)\r\n- \u2705 **Multi/single selection modes** \r\n- \u2705 **Responsive card sizing**\r\n- \u2705 **Per-item custom styling** (colors)\r\n- \u2705 **Bold selected labels**\r\n- \u2705 **Configurable component dimensions**\r\n- \u2705 **Row/column orientations with scrolling**\r\n\r\n## Installation\r\n\r\n```sh\r\npip install streamlit-select-icons\r\n```\r\n\r\n## Usage\r\n\r\n```python\r\nimport streamlit as st\r\nfrom streamlit_select_icons import select_icons\r\n\r\n# Define your items\r\nitems = {\r\n \"home\": {\r\n \"label\": \"Home\", \r\n \"icon\": \"static/home-icon.png\", # Will resolve to /app/static/home-icon.png\r\n \"properties\": {\"category\": \"navigation\"}\r\n },\r\n \"search\": {\r\n \"label\": \"Search\", \r\n \"icon\": \"static/search-icon.png\", # Will resolve to /app/static/search-icon.png\r\n \"properties\": {\"category\": \"action\"}\r\n },\r\n \"profile\": {\r\n \"label\": \"Profile\", \r\n \"icon\": \"static/profile-icon.png\", # Will resolve to /app/static/profile-icon.png\r\n \"properties\": {\"category\": \"user\"}\r\n },\r\n}\r\n\r\n# Create the icon selector\r\nresult = select_icons(\r\n items=items,\r\n multi_select=True, # Allow multiple selections\r\n layout=\"column\", # or \"row\"\r\n columns=2, # Number of columns in grid\r\n width=300, # Component width\r\n height=200, # Component height\r\n size=80, # Individual card size\r\n bold_selected=True, # Bold labels when selected\r\n key=\"icon_selector\"\r\n)\r\n\r\nif result:\r\n st.write(\"Selected items:\", result[\"selected_items\"])\r\n st.write(\"All items:\", result[\"items\"])\r\n```\r\n\r\n## Static Files\r\n\r\nThe component automatically resolves icon paths that start with `static/` to Streamlit's `/app/static/` folder. This means:\r\n\r\n- `\"static/icon.png\"` \u2192 `/app/static/icon.png`\r\n- `\"static/my-icon.svg\"` \u2192 `/app/static/my-icon.svg`\r\n\r\n**Important**: Place your icon images in your Streamlit app's `static/` folder for this to work correctly.\r\n\r\n## Parameters\r\n\r\n- **items**: Dictionary of items with id keys and item data\r\n- **selected_items**: List of pre-selected item IDs\r\n- **multi_select**: Enable multiple selection (default: True)\r\n- **layout**: \"column\" or \"row\" layout orientation\r\n- **columns**: Number of columns (column layout)\r\n- **rows**: Number of rows (row layout) \r\n- **width**: Component container width in pixels\r\n- **height**: Component container height in pixels\r\n- **size**: Individual card size in pixels (default: 96)\r\n- **item_style**: Per-item custom colors and styling\r\n- **bold_selected**: Make selected labels bold (default: False)\r\n- **key**: Unique component key\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Streamlit component that creates a selectable list of icons with labels.",
"version": "0.0.3",
"project_urls": {
"Bug Reports": "https://github.com/edt-andrew/streamlit-select-icons/issues",
"Homepage": "https://github.com/edt-andrew/streamlit-select-icons",
"Source": "https://github.com/edt-andrew/streamlit-select-icons"
},
"split_keywords": [
"streamlit",
" component",
" icons",
" ui",
" selection"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "226dd1427ac8c6af57ab1530d2a96f4a1ed73e46816e4205a9df7d31fffe51e7",
"md5": "cf7bd9ac0d4c6607b472a4003560f2a2",
"sha256": "2926a2e7f4cee4affa353cbe119ad3fca3aab64627974a7d89abcce7dc1dde65"
},
"downloads": -1,
"filename": "streamlit_select_icons-0.0.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "cf7bd9ac0d4c6607b472a4003560f2a2",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.11",
"size": 126749,
"upload_time": "2025-08-21T10:42:49",
"upload_time_iso_8601": "2025-08-21T10:42:49.649649Z",
"url": "https://files.pythonhosted.org/packages/22/6d/d1427ac8c6af57ab1530d2a96f4a1ed73e46816e4205a9df7d31fffe51e7/streamlit_select_icons-0.0.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "ab98751d2e48f48e3f20bfd9f59162db192dcd59df497185c27deabd6b3e2abc",
"md5": "8c15856da7355ae91f9278c62dbfc86c",
"sha256": "c8cf1286f189fc7b8f62eb0c65c1aa7dc7cbd603f6ff3a8b13942f0e34333dac"
},
"downloads": -1,
"filename": "streamlit_select_icons-0.0.3.tar.gz",
"has_sig": false,
"md5_digest": "8c15856da7355ae91f9278c62dbfc86c",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.11",
"size": 127752,
"upload_time": "2025-08-21T10:42:51",
"upload_time_iso_8601": "2025-08-21T10:42:51.009373Z",
"url": "https://files.pythonhosted.org/packages/ab/98/751d2e48f48e3f20bfd9f59162db192dcd59df497185c27deabd6b3e2abc/streamlit_select_icons-0.0.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-21 10:42:51",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "edt-andrew",
"github_project": "streamlit-select-icons",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "streamlit-select-icons"
}
JSON
