The avatar for @jerryjappinen
Jerry Jäppinen
Design, tech, engineering and science. Head of Design and User Research.
Public
Edited
Apr 8
Importers
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
${icon("gitlab")} Icons are dynamically colored
Insert cell
${icon("gitlab-color")} Some icons have colors
Insert cell
${icon("gitlab-color", 2)} Icons can be resized
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
${icon("gitlabcolor")} ${icon("git-lab-color")} ${icon("GitLab color")} ${icon("GitlabColor")}
Insert cell
${[
"toggle-off",
"toggle-on",
"checkbox-off",
"checkbox-indeterminate",
"checkbox-on",
"radio button off",
"radio button on"
].map(key => icon(key))}
Insert cell
Insert cell
Insert cell
Insert cell
<button disabled>Reset ${html`${icon("undo")}`}</button> &nbsp; &nbsp; <a href="">Open link ${html`${icon("external")}`}</a>
Insert cell
<p style="color: purple;">
${html`${icon("medium", 3)}`}
&nbsp; &nbsp;
${html`${icon("medium-color", 3)}`}
</p>
Insert cell
Insert cell
Insert cell
<p style="color: salmon; font-family: monospace;">
${html`${icon("medium")}`} icon()
&nbsp; &nbsp;
${html`${iconImg("medium")}`} iconImg()
</p>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
${icon("gitlab")} &nbsp; ${icon("gitlab", 2)} &nbsp; ${iconImg("gitlab", "41px")} &nbsp; ${icon("gitlab", "1.5cm")}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
icon("gitlab")
Insert cell
Insert cell
Insert cell
Insert cell
iconImg("gitlab")
Insert cell
Insert cell
Insert cell
Insert cell
icons.gitlab
Insert cell
Insert cell
Insert cell
Insert cell
${icons.gitlab} Raw icon – ${icon("gitlab")} Using `icon()`
Insert cell
${icons.gitlab} ${icon("gitlab")} ${iconImg("gitlab")}
Insert cell
${html`${icons.gitlab} ${icon("gitlab")} ${iconImg("gitlab")}`}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
bonnMeta["dist-tags"].latest // Latest version of Bonn
Insert cell
v = "0.11.38" // Set this to lock Bonn version
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more